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) => }
+ itemContent={(index, comment) => }
components={footerComponents}
/>
) : (
<>
{feed.map((comment, index) => (
-
+
))}
>