fix(dashboard): swap the chat panes where two do not fit

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - The dashboard chat room shrinks within its layout instead of overflowing it, so a long contact or group name no longer pushes the send button out of reach. Thanks @rainerigius.
 - The chat composer shrinks with its pane, so the send button stays reachable. It sat outside the layout's clip below a 1014px viewport with the navigation expanded, and on any phone 402 CSS px or narrower.
 - The channel and status pane heading truncates with an ellipsis and carries its full text in a tooltip. A long title previously ran past the panel edge, cut mid-glyph with nothing to signal it.
+- The Chats page shows one pane at a time from 769px to 888px with the navigation expanded, where two panes left the room narrower than the composer and pushed the send button out of the panel. The message field now keeps a floor rather than shrinking to nothing.
 
 ## [0.23.0] - 2026-08-20
 

dashboard/src/pages/Chats.css

@@ -616,9 +616,10 @@
 .chats-page .message-text-input {
   flex: 1;
   /* An input keeps its intrinsic width as its automatic minimum, which pinned the whole composer to
-     369px and pushed the send button outside the layout's clip on a narrow desktop window. Shrinking
-     stops at the input's own padding, so a very narrow room leaves a stub rather than a usable field. */
-  min-width: 0;
+     369px and pushed the send button outside the layout's clip. The floor replaces that with one small
+     enough to let the composer fit a narrow pane and large enough to keep a caret and a few characters
+     visible; without it the box shrinks to its own padding and shows nothing at all. */
+  min-width: 64px;
   padding: 0.75rem 1rem;
   border: 1px solid var(--border);
   border-radius: 24px;
@@ -900,6 +901,38 @@
   }
 }
 
+/* Between the mobile breakpoint and 888px the two-pane layout leaves the room narrower than the
+   composer's 244px minimum, so the send button fell outside the panel's clip with no scrollbar to
+   recover it. In that band the panes swap one at a time instead, the way they already do on a phone.
+   Bounded on both sides on purpose: at 768px and below the mobile shell owns the layout, and from 889px
+   the room fits the composer again. The upper bound tracks that minimum, so it moves if the composer's
+   own width does. Keyed to the navigation as well as the viewport, because the room is `viewport - 646`
+   only while the nav is expanded; collapsed it already fits and none of this should apply.
+   `.main-content.expanded` is Layout's class for the COLLAPSED nav. */
+@media (min-width: 769px) and (max-width: 888px) {
+  .main-content:not(.expanded) .chats-page .chats-layout {
+    flex-direction: column;
+  }
+
+  .main-content:not(.expanded) .chats-page .chats-sidebar {
+    width: 100%;
+    height: 100%;
+    border-right: none;
+  }
+
+  .main-content:not(.expanded) .chats-page .chats-layout.has-active-chat .chats-sidebar {
+    display: none;
+  }
+
+  .main-content:not(.expanded) .chats-page .chats-layout:not(.has-active-chat) .chats-room {
+    display: none;
+  }
+
+  .main-content:not(.expanded) .chats-page .room-back {
+    display: inline-flex;
+  }
+}
+
 /* =============================================================================
    MEDIA RENDERING STYLES
    ============================================================================= */