[PR #764] fix: UI improvements for mobile & small screens #769

Open
opened 2026-02-16 12:36:28 -05:00 by yindo · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/stoatchat/for-web/pull/764
Author: @Pecacheu
Created: 2/14/2026
Status: 🔄 Open

Base: mainHead: main


📝 Commits (6)

  • ff1cd1a fix: Fix for #541, add call button to header bar instead
  • d6e8bed fix: More mobile UI fixes
  • ef699c1 fix: Mobile UI marches onwards
  • b903dc3 fix: Add back button to Channel & Server settings
  • c9c085e fix: Simplified CSS
  • 8cac531 fix: Move the CSS again & misc

📊 Changes

28 files changed (+203 additions, -169 deletions)

View changed files

📝 .gitmodules (+1 -2)
📝 packages/client/components/app/interface/settings/ChannelSettings.tsx (+3 -1)
📝 packages/client/components/app/interface/settings/ServerSettings.tsx (+3 -1)
📝 packages/client/components/app/interface/settings/Settings.tsx (+8 -4)
📝 packages/client/components/app/interface/settings/UserSettings.tsx (+3 -2)
📝 packages/client/components/app/interface/settings/_layout/Content.tsx (+15 -17)
📝 packages/client/components/app/interface/settings/_layout/Sidebar.tsx (+8 -7)
📝 packages/client/components/app/interface/settings/_layout/SidebarButton.tsx (+0 -2)
📝 packages/client/components/app/interface/settings/index.tsx (+5 -1)
📝 packages/client/components/app/interface/settings/user/_AccountCard.tsx (+16 -0)
📝 packages/client/components/modal/modals/Settings.tsx (+1 -7)
📝 packages/client/components/state/index.tsx (+3 -0)
📝 packages/client/components/ui/components/design/Button.tsx (+8 -0)
📝 packages/client/components/ui/components/design/IconButton.tsx (+8 -0)
📝 packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx (+1 -0)
📝 packages/client/components/ui/components/features/messaging/elements/Container.tsx (+8 -1)
📝 packages/client/components/ui/components/features/texteditor/TextEditor2.tsx (+7 -1)
📝 packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts (+14 -5)
📝 packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx (+6 -9)
packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx (+0 -69)

...and 8 more files

📄 Description

Made a few UI improvements for Stoat on phones and tablets, namely:

  • Replaced voice call card with a button in the header bar
  • Shrink home-screen layout to single-column for mobile
  • Settings menus replace the "ESC" button on the right with a back button in the left menu for small screens
  • Text editor overflows placeholder text with ... as Discord and Telegram do, but expands it once you start typing
  • Text editor allows multi-line input with enter on mobile instead of sending

Planning on more mobile improvements but this is what I gots for now.


🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/stoatchat/for-web/pull/764 **Author:** [@Pecacheu](https://github.com/Pecacheu) **Created:** 2/14/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (6) - [`ff1cd1a`](https://github.com/stoatchat/for-web/commit/ff1cd1a9b7340e869c9dab5e2fb03fa6ad10a90e) fix: Fix for #541, add call button to header bar instead - [`d6e8bed`](https://github.com/stoatchat/for-web/commit/d6e8bed5a78bff523c257133db2a69bf32d5a400) fix: More mobile UI fixes - [`ef699c1`](https://github.com/stoatchat/for-web/commit/ef699c1eef7956a85348a4560335689a03c25f5b) fix: Mobile UI marches onwards - [`b903dc3`](https://github.com/stoatchat/for-web/commit/b903dc30c9eaac2ba286930616ebdcdaaafda321) fix: Add back button to Channel & Server settings - [`c9c085e`](https://github.com/stoatchat/for-web/commit/c9c085e434208fa0d9b5f4874055b01ee7ce7ae5) fix: Simplified CSS - [`8cac531`](https://github.com/stoatchat/for-web/commit/8cac5314af5d1ade2f203f49f0f3a3d5857d6d6b) fix: Move the CSS again & misc ### 📊 Changes **28 files changed** (+203 additions, -169 deletions) <details> <summary>View changed files</summary> 📝 `.gitmodules` (+1 -2) 📝 `packages/client/components/app/interface/settings/ChannelSettings.tsx` (+3 -1) 📝 `packages/client/components/app/interface/settings/ServerSettings.tsx` (+3 -1) 📝 `packages/client/components/app/interface/settings/Settings.tsx` (+8 -4) 📝 `packages/client/components/app/interface/settings/UserSettings.tsx` (+3 -2) 📝 `packages/client/components/app/interface/settings/_layout/Content.tsx` (+15 -17) 📝 `packages/client/components/app/interface/settings/_layout/Sidebar.tsx` (+8 -7) 📝 `packages/client/components/app/interface/settings/_layout/SidebarButton.tsx` (+0 -2) 📝 `packages/client/components/app/interface/settings/index.tsx` (+5 -1) 📝 `packages/client/components/app/interface/settings/user/_AccountCard.tsx` (+16 -0) 📝 `packages/client/components/modal/modals/Settings.tsx` (+1 -7) 📝 `packages/client/components/state/index.tsx` (+3 -0) 📝 `packages/client/components/ui/components/design/Button.tsx` (+8 -0) 📝 `packages/client/components/ui/components/design/IconButton.tsx` (+8 -0) 📝 `packages/client/components/ui/components/features/messaging/composition/MessageBox.tsx` (+1 -0) 📝 `packages/client/components/ui/components/features/messaging/elements/Container.tsx` (+8 -1) 📝 `packages/client/components/ui/components/features/texteditor/TextEditor2.tsx` (+7 -1) 📝 `packages/client/components/ui/components/features/texteditor/codeMirrorLineWrap.ts` (+14 -5) 📝 `packages/client/components/ui/components/features/voice/callCard/VoiceCallCard.tsx` (+6 -9) ➖ `packages/client/components/ui/components/features/voice/callCard/VoiceCallCardPreview.tsx` (+0 -69) _...and 8 more files_ </details> ### 📄 Description Made a few UI improvements for Stoat on phones and tablets, namely: - Replaced voice call card with a button in the header bar - Shrink home-screen layout to single-column for mobile - Settings menus replace the "ESC" button on the right with a back button in the left menu for small screens - Text editor overflows placeholder text with ... as Discord and Telegram do, but expands it once you start typing - Text editor allows multi-line input with enter on mobile instead of sending Planning on more mobile improvements but this is what I gots for now. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
yindo added the pull-request label 2026-02-16 12:36:28 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: stoatchat/for-web#769