From ef8d77ccfe54d327da23dcea9e6e1c24c0da9fe7 Mon Sep 17 00:00:00 2001
From: Talha Ahmed <talha.ahmed@utopiabrands.com>
Date: Wed, 2 Sep 2026 19:20:49 +0500
Subject: [PATCH] Inbox: tidy the queue pagination

The stacked pager read as three loose rows with 'of N' printed twice.
Queue-scoped: drop the duplicate page-size total (the Showing line
already carries it), wrap page-controls with even gaps, and slim the
page buttons so all nine nav controls (4 chevrons + up to 5 numbers)
fit the ~350px split column on one row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/styles/styles.css | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/styles/styles.css b/frontend/src/styles/styles.css
index e3676ca..ac1de41 100644
--- a/frontend/src/styles/styles.css
+++ b/frontend/src/styles/styles.css
@@ -1072,12 +1072,27 @@ canvas { width: 100%; max-width: 100%; display: block; }
   overflow: visible;
 }
 .inbox-queue .page-info { width: 100%; }
-.inbox-queue .page-controls { flex-wrap: wrap; }
+/* "of N" repeats the Showing line one row up — drop it in the queue column. */
+.inbox-queue .page-size-total { display: none; }
+.inbox-queue .page-size { margin-right: 0; }
+.inbox-queue .page-controls {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  row-gap: 8px;
+}
 .inbox-queue .page-nav {
   justify-content: flex-start;
-  flex: 1 1 100%;
-  width: 100%;
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 3px;
+  row-gap: 4px;
 }
+.inbox-queue .page-nums { flex-wrap: wrap; gap: 3px; row-gap: 4px; }
+/* Slimmer buttons: nine controls (4 chevrons + up to 5 numbers) fit the
+   ~350px split column on one row. */
+.inbox-queue .page-btn { min-width: 31px; height: 31px; padding: 0 6px; }
 .inbox-bulk-bar {
   display: flex;
   align-items: center;
-- 
2.40.1