Mobile Chat, Tightened Up

A cluster of mobile fixes: a header that clears the notch, A/V dropdowns you can actually read, and action buttons that stay on one line.

A cluster of mobile fixes made the chat screen feel finished on a phone:

  • A header that clears the notch. The chat header now respects the device's safe area so it isn't tucked under the status bar, the room name truncates instead of shoving the controls off-screen, and the spacing was tightened so the mode, translate, refresh, and clear controls all fit on one row without overlapping. The translate language dropdown was right-anchored so it can't spill off the edge.
  • A/V dropdowns you can actually read. The microphone, camera, and output pickers in the voice panel were native dropdowns whose option lists rendered cartoonishly small on mobile. They were replaced with a custom dropdown — comfortable, full-width option rows that match the dark panel — so picking a device is no longer a squint-and-tap exercise. The voice panel itself now scrolls and clears the notch, too.
  • Action buttons that stay put. Adding sender avatars widened the message header just enough that the action icons — copy, share, marker, reply — wrapped to a second line on narrow screens. They're now grouped together and pinned to the right, with the sender name shrinking to make room, so the whole header stays on one clean line.

Why it matters

These are the thousand small cuts that make or break a mobile experience — a header hidden behind the notch, a dropdown too small to use, a reply button that jumps to its own line. None of them is dramatic on its own, but fixing them together is the difference between an app that feels native on the phone and one that feels ported to it.