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">

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