Fix mobile display: RoomInfoPanel inaccessible, emoji picker overflow

RoomInfoPanel was hard-gated behind !isMobile in ChatShellPage.tsx, but
its trigger button ("Room details" in ChatPane.tsx) still rendered and
toggled state unconditionally -- tapping it on mobile did nothing
visible, with no way to reach room info/members/settings at all. Fixed
by removing the gate and making the panel itself responsive: it renders
as a full-screen fixed overlay below the mobile breakpoint instead of
the desktop resizable aside (which stays exactly as before -- verified
in-browser at both viewport sizes).

Also found and fixed a second real bug during the mobile audit: the
emoji picker's fixed 320px width overflows a 375px-wide viewport by 5px
depending on trigger position (e.g. the composer's emoji button, near
the left edge). Shrunk it to 280px with a proportionally reduced column
count below 480px, rather than attempting dynamic position-aware sizing
for a 5px overflow.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-16 09:35:19 -06:00
co-authored by Claude Sonnet 5
parent 9c275b1b86
commit b451504d07
4 changed files with 40 additions and 3 deletions
+1 -1
View File
@@ -106,7 +106,7 @@ export function ChatShellPage() {
)
))}
{!isMobile && infoOpen && activeRoom && (
{infoOpen && activeRoom && (
<RoomInfoPanel
room={activeRoom}
members={members}