From 4fd0820d94041bc625427cd1bdbaf4185dba3738 Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Sun, 11 Jan 2026 16:57:09 +0100
Subject: [PATCH] fix(mod queue): adjust styling

---
 src/views/mod-queue/mod-queue.module.css | 67 +++++++++++++++++++-----
 src/views/mod-queue/mod-queue.tsx        |  4 +-
 2 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css
index cb0cf99e..f73c9726 100644
--- a/src/views/mod-queue/mod-queue.module.css
+++ b/src/views/mod-queue/mod-queue.module.css
@@ -53,14 +53,21 @@
 
 .tableHeader {
   display: flex;
-  padding: 5px;
-  border-bottom: var(--mod-queue-header-border-bottom);
-  background: var(--mod-queue-header-background-color);
+  gap: 1px;
   font-weight: bold;
   font-size: 9pt;
   text-transform: capitalize;
 }
 
+.numberHeader,
+.boardHeader,
+.excerptHeader,
+.timeHeader,
+.actionsHeader {
+  background: var(--mod-queue-header-background-color);
+  padding: 5px;
+}
+
 .numberHeader {
   width: 60px;
   flex-shrink: 0;
@@ -76,7 +83,7 @@
 }
 
 .timeHeader {
-  width: auto;
+  width: 210px;
   text-align: right;
   flex-shrink: 0;
   white-space: nowrap;
@@ -97,36 +104,68 @@
 /* ModQueueRow styles */
 .row {
   display: flex;
-  padding: 2px;
   border: none;
   align-items: center;
-  gap: 8px;
+  gap: 1px;
+  margin-top: 1px;
   color: var(--body-font-color);
   font-size: 9pt;
 }
 
-/* Odd rows - theme-specific background colors */
-:global(body.yotsuba) .rowOdd {
+.number,
+.board,
+.excerpt,
+.time,
+.actions {
+  padding: 2px 5px;
+}
+
+/* Odd rows - theme-specific background colors applied to cells */
+:global(body.yotsuba) .rowOdd .number,
+:global(body.yotsuba) .rowOdd .board,
+:global(body.yotsuba) .rowOdd .excerpt,
+:global(body.yotsuba) .rowOdd .time,
+:global(body.yotsuba) .rowOdd .actions {
   background-color: #ede2d4;
 }
 
-:global(body.yotsuba-b) .rowOdd {
+:global(body.yotsuba-b) .rowOdd .number,
+:global(body.yotsuba-b) .rowOdd .board,
+:global(body.yotsuba-b) .rowOdd .excerpt,
+:global(body.yotsuba-b) .rowOdd .time,
+:global(body.yotsuba-b) .rowOdd .actions {
   background-color: #e0e5f6;
 }
 
-:global(body.futaba) .rowOdd {
+:global(body.futaba) .rowOdd .number,
+:global(body.futaba) .rowOdd .board,
+:global(body.futaba) .rowOdd .excerpt,
+:global(body.futaba) .rowOdd .time,
+:global(body.futaba) .rowOdd .actions {
   background-color: #ede2d4;
 }
 
-:global(body.burichan) .rowOdd {
+:global(body.burichan) .rowOdd .number,
+:global(body.burichan) .rowOdd .board,
+:global(body.burichan) .rowOdd .excerpt,
+:global(body.burichan) .rowOdd .time,
+:global(body.burichan) .rowOdd .actions {
   background-color: #e0e5f6;
 }
 
-:global(body.tomorrow) .rowOdd {
+:global(body.tomorrow) .rowOdd .number,
+:global(body.tomorrow) .rowOdd .board,
+:global(body.tomorrow) .rowOdd .excerpt,
+:global(body.tomorrow) .rowOdd .time,
+:global(body.tomorrow) .rowOdd .actions {
   background-color: rgba(255, 255, 255, 0.1);
 }
 
-:global(body.photon) .rowOdd {
+:global(body.photon) .rowOdd .number,
+:global(body.photon) .rowOdd .board,
+:global(body.photon) .rowOdd .excerpt,
+:global(body.photon) .rowOdd .time,
+:global(body.photon) .rowOdd .actions {
   background-color: #888;
 }
 
@@ -160,7 +199,7 @@
 }
 
 .time {
-  width: auto;
+  width: 210px;
   flex-shrink: 0;
   text-align: right;
   white-space: nowrap;
diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx
index e3a53d7f..26e2d64a 100644
--- a/src/views/mod-queue/mod-queue.tsx
+++ b/src/views/mod-queue/mod-queue.tsx
@@ -531,13 +531,13 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
               totalCount={feed.length}
               endReached={loadMore}
               increaseViewportBy={{ bottom: 1200, top: 1200 }}
-              itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />}
+              itemContent={(index, comment) => <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 0} />}
               components={footerComponents}
             />
           ) : (
             <>
               {feed.map((comment, index) => (
-                <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 1} />
+                <ModQueueRow key={comment.cid} comment={comment} showBoardColumn={showBoardColumn} isOdd={index % 2 === 0} />
               ))}
               <ModQueueFooter hasMore={hasMore} subplebbitAddresses={subplebbitAddresses} />
             </>