From 2abc28fc14eabcf4a78044a35d3225e918afcdd5 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Wed, 2 Sep 2026 20:12:18 +0500
Subject: [PATCH] Inbox: single page scroll on phones, detail takes over from
 the list

The stacked split nested two scroll wells (list and detail each carried
max-height + overflow-y auto) inside the page scroll - scrollbars within
scrollbars on small screens. At <=900px both panes now flow naturally in
the one page scroll, and selecting an application swaps the list out for
the detail pane with a Back to list button (standard master-detail
collapse); selection also scrolls to the top so the detail header is in
view. Desktop keeps the two-pane split unchanged.

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

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index 059503c..7516af3 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -1018,6 +1018,11 @@ export default function Inbox() {
 
   function select(id) {
     setSelectedId(id)
+    // Phones swap the list for the detail pane — bring its top into view.
+    if (window.matchMedia?.('(max-width: 900px)').matches) {
+      window.scrollTo(0, 0)
+      document.querySelector('.content')?.scrollTo?.(0, 0)
+    }
     const item = inbox.find((i) => i.id === id)
     if (item?.kind === 'form') return   // sheet rows have no mailbox read state
     if (item?.unread) setRead.mutate({ ids: [id], read: true })
@@ -1151,7 +1156,7 @@ export default function Inbox() {
           />
         </div>
 
-        <div className="split inbox-split">
+        <div className={`split inbox-split${selected ? ' has-selection' : ''}`}>
             <div className="split-list inbox-queue">
               {!isForms && applicationsQuery.isSuccess && (
                 <BulkReadBar
@@ -1287,6 +1292,15 @@ export default function Inbox() {
             </div>
 
             <div className="split-detail">
+              {selected && (
+                <button
+                  type="button"
+                  className="btn btn-ghost btn-sm inbox-back"
+                  onClick={() => setSelectedId(null)}
+                >
+                  <Icon name="chevron-left" /> Back to list
+                </button>
+              )}
               {!selected ? (
                 <div style={{ padding: '100px 20px' }}>
                   <EmptyState icon="inbox" title="Select an application">
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index ac1de41..49e13be 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1027,6 +1027,18 @@ canvas { width: 100%; max-width: 100%; display: block; }
    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); }
+/* Desktop keeps the two-pane split; only the phone layout below shows it. */
+.inbox-back { display: none; }
+/* Phones: the stacked split nested two scroll wells inside the page scroll.
+   Instead: one page scroll, and a selected application takes over from the
+   list — the Back button returns to it (standard master-detail collapse). */
+@media (max-width: 900px) {
+  .inbox-split .split-list,
+  .inbox-split .split-detail { max-height: none; overflow: visible; }
+  .inbox-split.has-selection .split-list { display: none; }
+  .inbox-split:not(.has-selection) .split-detail { display: none; }
+  .inbox-back { display: inline-flex; margin: 10px 12px 0; }
+}
 .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
-- 
2.40.1