feat: Mobile UI for web by Pecacheu · Pull Request #835 · stoatchat/for-web

Pecacheu · 2026-02-19T17:16:35Z

Prerequisites

feat: Voice Call Button in header #1025 (DMs are virtually unusable on phone screen without)
refactor: Voice Call PIP Card #1102 (Merged)
feat: Device resize hooks (prep for Mobile/Tablet UI) #1196 (Backend hooks for layout changes)
fix: Add button action timeout to solve click-through issue on touch devices #1092 (Touch screen hard to use without, especially on Chromium browsers)
fix: Force touch keyboard to resize content window on mobile #1253

Why this is important

One of the most consistent reasons I hear stopping/making folks hesitate from joining Stoat is the borked mobile app situation. A lot of people in my generation spend much of our time on our phones, plus when it comes to keeping in touch at work, it's all you have access to.

Unfortunately, the current state of affairs is that the Android beta app is missing a ton of features and doesn't work right, and the iOS one isn't currently available. The best thing we've been telling these people is "use the web app in your browser instead," but the trouble is, well you get an experience like this (these are screenshots from real users in the Stoat server who are asking for this, as well as one of my friends testing this fork.)

Responsive mobile UI layout

Phone Example (S25 Ultra)

The most important UI change is the slide gesture to open and close panels instead of showing them side-by-side. I've done some work to refine this to make it feel as natural as possible, eg. taking into account inertia of the finger to "snap" the panel open and shut.

Swipe.mp4

I've un-rounded the corners to increase usable space under a certain display size (opinions welcome on this). I also added code to make the panel slide over automatically when tapping a DM/channel. Lastly, the "channel collapse" button is replaced with a "back" button that returns to the channels view.

Tablet Example (iPad Mini)

When the screen is big enough, however, the UI dynamically changes back to the traditional layout. However, the "server members" panel on the right is collapsed by default in this case, as we found it was creating some confusion among testers. One user also suggests allowing a swipe gesture to open that on tablets, but open to thoughts on that.

Other enhancements for touch users

Enable autocapitalize and autocorrect on message box (these can be configured as desired in the user's OS keyboard settings, but not enabling them here prevents them from working regardless of that setting.)
Change keyboard shortcuts so that Ctrl + Enter sends on mobile instead of Enter, enabling newlines on touch-keyboard without sending.
Disable right-click/long-press context menu when editing a message, so that spell-check suggestions can actually be clicked on.
Don't trigger floating tooltops or message toolbar on touchscreens, otherwise they get stuck due to no mouse events.
- Added "React" button to context menu to still allow reacts on mobile.
Skip User Card preview when tapping user icon on mobile and go straight to full User Profile.
Adjust margins and min sizes on modals, invite previews, and some other UI elements to improve the mobile experience.

Linked Issues

Fixes #850
Fixes #883
Fixes #887
Fixes #924
Fixes #998
Fixes #1005
Fixes #1023
Fixes #1033

TODO

Remember last SlideDrawer state (open/closed) when rotating to landscape then back to portrait. Don't necessarily need to persist this in the data store.
Auto-hide touch keyboard when swiping from messages view to channels view.
Search icon instead of input box in header on mobile (phone & tablet layouts).
Make channel name ellipsis truncated to ensure header buttons fit.
When dragging finger over top of a channel/DM and sliding the drawer, the channel/DM button can get visually stuck in the 'hovered' state.
Hold-and-drag to reorder server sidebar and channel bar doesn't work good on touchscreens.
Settings menu will be moving to a full-screen modal, which may necessitate code changes.
- Likely still using SlideDrawer for navigation in settings?
Use a full-screen modal for search and members panel on mobile instead of the sidebar.
Appearance menu needs... something, idk. Maybe use dropdowns instead in mobile layout?

Test live at https://forestfire.net:420

Btw, quick thanks to everyone who's helped test this so far on lots of different devices and helped fix lots of bugs!

feat: Mobile UI for web (upstream PR stoatchat#835)

Pecacheu · 2026-03-13T00:17:36Z

Okay I'm going to attempt to fix the DCO check and i18n again while pushing some commits. If I don't come back, play Porter Robinson at my funeral.

- I swear this is the last time lol. Now using classes for everything instead of just some of it, will also help with changes for phone view - Change threshold for tablet view to 900px Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>

- Phone UI triggers at < 600px width - Animated, swipable drawer slider, inspired by Discord app Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>

- Inertia-based snapping for SlideDrawer! We mustelids are experts in speed so this was inevitable - Fix bug that could cause a SlideDrawer race condition if openning and closing settings menu super fast - Add appDrawer to app state to update things when the state of the UI changes between mobile/non-mobile - Don't trigger floating tooltops when input is touched, otherwise they get stuck in a showing state on touchscreens - Reset layout to member sidebar being hidden when mobile view is shown (otherwise how to close it seems to cause some confusion among those who helped test so far) - Replace primary sidebar collapse button with a "back" button for mobie view Signed-off-by: Pecacheu <3608878+Pecacheu@users.noreply.github.com>