From f8b5548dee4acc352ad32c61a6604880987481ea Mon Sep 17 00:00:00 2001
From: Yudhi Armyndharis <yudhi@rmyndharis.com>
Date: Fri, 21 Aug 2026 14:56:57 +0700
Subject: [PATCH] fix(dashboard): swap the chat panes where two do not fit

With the navigation expanded the chat room is `viewport - 646`, so
between the mobile breakpoint and 888px it is narrower than the
composer's own minimum and the send button fell outside the panel's
clip, with neither a scrollbar nor a visible text field to work around
it. Narrowing the chat list cannot pay for this: its own header floors
at 245px in English and 270px in French, well above the 229px the
budget allows.

The panes now swap one at a time across that band, which is the
behaviour the page already has on a phone, and the room goes from 123px
to 443px at the narrow end. The band is keyed to the navigation as well
as the viewport, so the collapsed nav, where the room already fits, is
untouched at every width.

The message input also gains a 64px floor. It could previously shrink to
its own padding and border and render a text box exactly zero pixels
wide, which kept the send button reachable at the cost of hiding what
the user typed.
---
 CHANGELOG.md                  |  1 +
 dashboard/src/pages/Chats.css | 39 ++++++++++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 289285c31..421bdd8be 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/dashboard/src/pages/Chats.css b/dashboard/src/pages/Chats.css
index d40edac3e..d7e0c1fca 100644
--- a/dashboard/src/pages/Chats.css
+++ b/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
    ============================================================================= */