From e7907a194e95ece20d40a2a5cd41946ca6e4573e Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Mon, 31 Aug 2026 15:22:18 +0500
Subject: [PATCH] Inbox: responsive fixes for the split layout

- List column yields (34%, floor 280px) instead of holding 420px, so the
  detail pane stays readable in the 980-1200px band.
- Detail pane is a size container: its two-column info grid collapses on
  the pane own width, and long names/emails wrap instead of clipping.
- Tab strip wraps on narrow screens instead of running off-canvas.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/screens/Inbox.jsx |  1 +
 frontend/src/styles/styles.css | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index 4d14d64..e15ce4e 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -998,6 +998,7 @@ export default function Inbox() {
       <div className="card">
         <div style={{ margin: '0 16px', paddingTop: 8 }}>
           <Tabs
+            className="tabs tabs-wrap"
             value={tab}
             onChange={(t) => {
               setTab(t)
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 3328e89..f91ebf1 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -979,7 +979,15 @@ canvas { width: 100%; max-width: 100%; display: block; }
 /* Split inbox layout */
 .split { display: grid; grid-template-columns: 380px 1fr; gap: 0; min-height: 560px; }
 .split-list { border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
-.split-detail { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); }
+.split-detail { overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - 260px); max-height: calc(100dvh - 260px); container-type: inline-size; }
+/* The detail pane can be narrow while the viewport is wide (split layout),
+   so viewport media queries cannot see it: the pane is a size container and
+   its two-column field grid collapses on the pane's own width. */
+@container (max-width: 560px) {
+  .split-detail .info-grid { grid-template-columns: 1fr; }
+  .split-detail .profile-hero { flex-wrap: wrap; }
+}
+.split-detail .ph-name { overflow-wrap: anywhere; }
 .inbox-item { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: .12s; position: relative; }
 .inbox-item:hover { background: var(--bg-sunken); }
 .inbox-item.active { background: var(--primary-soft); }
@@ -994,8 +1002,11 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .ii-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
 .ii-time { font-size: 11px; color: var(--text-3); white-space: nowrap; }
 /* Inbox sidebar only: fit the list instead of scrolling sideways.
-   Username (.ii-name) and subject (.ii-pos) are left alone. */
-.inbox-split { grid-template-columns: minmax(0, 420px) 1fr; }
+   Username (.ii-name) and subject (.ii-pos) are left alone.
+   The list column yields (34%, floor 280px) instead of holding a hard 420px,
+   so the detail pane keeps a readable width in the 980-1200px band where the
+   split has not collapsed to one column yet. */
+.inbox-split { grid-template-columns: minmax(280px, 34%) minmax(0, 1fr); }
 .inbox-queue { overflow-x: hidden; min-width: 0; }
 .inbox-queue .inbox-item { min-width: 0; }
 /* Name + time on row 1, subject on row 2, chips span the full width under