From 63a0fbf8571ed586bf63ea817e150a92add37dad Mon Sep 17 00:00:00 2001
From: "ahmed.mujtaba" <ahmed.mujtaba@utopiabrands.com>
Date: Wed, 19 Aug 2026 19:12:42 +0500
Subject: [PATCH] horizontal expansion

---
 frontend/src/screens/Inbox.jsx | 46 +++++++++++++++++-----------------
 frontend/src/styles/styles.css | 40 +++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 23 deletions(-)

diff --git a/frontend/src/screens/Inbox.jsx b/frontend/src/screens/Inbox.jsx
index 95644dc..39d63b3 100644
--- a/frontend/src/screens/Inbox.jsx
+++ b/frontend/src/screens/Inbox.jsx
@@ -463,39 +463,39 @@ function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit,
   }
 
   return (
-    <div
-      className="flex items-center gap-12"
-      style={{ padding: '10px 16px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap' }}
-    >
+    <div className="inbox-bulk-bar">
       <RowCheck
         checked={allSelected}
         onToggle={toggleAll}
         label={allSelected ? 'Clear selection' : 'Select all'}
       />
-      <span className="text-muted text-sm">
+      <span className="inbox-bulk-count" title={n > 0
+        ? `${n} selected`
+        : `${total} ${total === 1 ? 'message' : 'messages'}${unreadCount ? ` · ${unreadCount} unread` : ''}`}
+      >
         {n > 0
           ? `${n} selected`
-          : `${total} ${total === 1 ? 'message' : 'messages'}${unreadCount ? ` · ${unreadCount} unread` : ''}`}
+          : `${total}${unreadCount ? ` · ${unreadCount}` : ''}`}
       </span>
-      <div className="flex gap-8" style={{ marginLeft: 'auto', flexWrap: 'wrap' }}>
+      <div className="inbox-bulk-actions">
         {n > 0 ? (
           <>
             <button
               className="btn btn-secondary btn-sm"
               disabled={blocked || unreadCount === 0}
-              title={unreadCount === 0 ? nothingTo('read') : tip}
+              title={unreadCount === 0 ? nothingTo('read') : tip || 'Mark selected read'}
               onClick={() => flashRead('selected', () => onSetRead(true))}
             >
               {ticked === 'selected' && <Icon name="check" />}
-              Mark read{unreadCount ? ` (${unreadCount})` : ''}
+              Read
             </button>
             <button
               className="btn btn-secondary btn-sm"
               disabled={blocked || readCount === 0}
-              title={readCount === 0 ? nothingTo('unread') : tip}
+              title={readCount === 0 ? nothingTo('unread') : tip || 'Mark selected unread'}
               onClick={() => onSetRead(false)}
             >
-              <Icon name="mail" /> Mark unread{readCount ? ` (${readCount})` : ''}
+              Unread
             </button>
             <button className="btn btn-ghost btn-sm" onClick={clear}>Clear</button>
           </>
@@ -508,7 +508,7 @@ function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit,
               onClick={() => flashRead('all', () => onSetAllRead(true))}
             >
               {ticked === 'all' && <Icon name="check" />}
-              Mark all read{unreadCount ? ` (${unreadCount})` : ''}
+              Read
             </button>
             <button
               className="btn btn-secondary btn-sm"
@@ -516,7 +516,7 @@ function BulkReadBar({ rows, selection, onSetRead, onSetAllRead, busy, canEdit,
               title={readCount === 0 ? nothingTo('unread') : scopeTip}
               onClick={() => onSetAllRead(false)}
             >
-              <Icon name="mail" /> Mark all unread{readCount ? ` (${readCount})` : ''}
+              Unread
             </button>
           </>
         )}
@@ -756,14 +756,8 @@ export default function Inbox() {
         {tab === 'Email' ? (
           <EmailTab query={emailsQuery} toast={toast} />
         ) : (
-          <div className="split">
-            <div className="split-list">
-              <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
-                <div className="toolbar-search" style={{ maxWidth: 'none' }}>
-                  <Icon name="search" />
-                  <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search applications…" />
-                </div>
-              </div>
+          <div className="split inbox-split">
+            <div className="split-list inbox-queue">
               {applicationsQuery.isSuccess && (
                 <BulkReadBar
                   rows={list}
@@ -775,6 +769,12 @@ export default function Inbox() {
                   scopeLabel={scopeLabel}
                 />
               )}
+              <div style={{ padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
+                <div className="toolbar-search" style={{ maxWidth: 'none' }}>
+                  <Icon name="search" />
+                  <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search applications…" />
+                </div>
+              </div>
               <div>
                 {applicationsQuery.isPending && (
                   <EmptyState icon="inbox" title="Loading…">Fetching applications from the server.</EmptyState>
@@ -1429,8 +1429,8 @@ function EmailTab({ query, toast }) {
         </button>
       </div>
 
-      <div className="split">
-        <div className="split-list">
+      <div className="split inbox-split">
+        <div className="split-list inbox-queue">
           {query.isSuccess && emails.length > 0 && (
             <BulkReadBar
               rows={emails}
diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index 63c04c9..2008717 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -835,6 +835,46 @@ canvas { width: 100%; max-width: 100%; display: block; }
 .ii-pos { font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .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, 380px) 1fr; }
+.inbox-queue { overflow-x: hidden; min-width: 0; }
+.inbox-queue .inbox-item { min-width: 0; }
+.inbox-queue .ii-meta { flex-wrap: wrap; min-width: 0; }
+.inbox-queue .source-chip {
+  min-width: 0; max-width: 100%;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.inbox-queue .toolbar-search { min-width: 0; }
+.inbox-bulk-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+.inbox-bulk-count {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text-3);
+}
+.inbox-bulk-actions {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+.inbox-bulk-actions .btn-sm {
+  padding: 5px 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
 /* `--chip` is the source's own brand colour, set inline. It tints the
    background and fills the dot, while the label stays on theme text so
    11px copy keeps its contrast in both modes. */