From acd6514e31c824339e0cb7b8c37b1582ac6bc33a Mon Sep 17 00:00:00 2001
From: plebeius <tom@plebbit.com>
Date: Sun, 11 Jan 2026 17:34:35 +0100
Subject: [PATCH] style(mod queue): align title with table when filter by board
 is not rendered

---
 src/views/mod-queue/mod-queue.module.css | 25 +++++--
 src/views/mod-queue/mod-queue.tsx        | 85 +++++++++++++++---------
 2 files changed, 74 insertions(+), 36 deletions(-)

diff --git a/src/views/mod-queue/mod-queue.module.css b/src/views/mod-queue/mod-queue.module.css
index 5434324c..ee96e5f7 100644
--- a/src/views/mod-queue/mod-queue.module.css
+++ b/src/views/mod-queue/mod-queue.module.css
@@ -5,6 +5,15 @@
 }
 
 .header {
+  margin-bottom: 10px;
+}
+
+.title {
+  font-size: 1.5em;
+  font-weight: bold;
+}
+
+.controls {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -13,9 +22,14 @@
   gap: 10px;
 }
 
-.title {
-  font-size: 1.5em;
-  font-weight: bold;
+.controlsLeft {
+  display: flex;
+  align-items: center;
+}
+
+.controlsRight {
+  display: flex;
+  align-items: center;
 }
 
 .alertThresholdSetting {
@@ -270,7 +284,6 @@ span.reject:hover {
 
 /* ModQueueBoardFilter styles */
 .filterContainer {
-  margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 8px;
@@ -354,6 +367,10 @@ span.reject:hover {
   }
 
   .header {
+    margin-bottom: 10px;
+  }
+
+  .controls {
     flex-direction: column;
     align-items: flex-start;
   }
diff --git a/src/views/mod-queue/mod-queue.tsx b/src/views/mod-queue/mod-queue.tsx
index aabe579f..b2d1075f 100644
--- a/src/views/mod-queue/mod-queue.tsx
+++ b/src/views/mod-queue/mod-queue.tsx
@@ -475,42 +475,63 @@ export const ModQueueView = ({ boardIdentifier: propBoardIdentifier }: ModQueueV
     [hasMore, subplebbitAddresses],
   );
 
+  const alertThresholdControl = (
+    <div className={styles.alertThresholdSetting}>
+      <label>
+        {t('alert_threshold')}:
+        <input
+          type='number'
+          min='1'
+          step={alertThresholdUnit === 'minutes' ? '1' : '1'}
+          value={alertThresholdValue}
+          onChange={(e) => setAlertThreshold(Number(e.target.value), alertThresholdUnit)}
+          className={styles.alertThresholdInput}
+        />
+        <select
+          value={alertThresholdUnit}
+          onChange={(e) => {
+            const newUnit = e.target.value as 'hours' | 'minutes';
+            const newValue =
+              alertThresholdUnit === 'hours' && newUnit === 'minutes'
+                ? alertThresholdValue * 60
+                : alertThresholdUnit === 'minutes' && newUnit === 'hours'
+                  ? Math.round(alertThresholdValue / 60)
+                  : alertThresholdValue;
+            setAlertThreshold(Math.max(1, newValue), newUnit);
+          }}
+        >
+          <option value='minutes'>{t('minutes')}</option>
+          <option value='hours'>{t('hours')}</option>
+        </select>
+      </label>
+    </div>
+  );
+
   return (
     <div className={styles.container}>
-      <div className={styles.header}>
-        <div className={styles.title}>{t('moderation_queue')}</div>
-        <div className={styles.alertThresholdSetting}>
-          <label>
-            {t('alert_threshold')}:
-            <input
-              type='number'
-              min='1'
-              step={alertThresholdUnit === 'minutes' ? '1' : '1'}
-              value={alertThresholdValue}
-              onChange={(e) => setAlertThreshold(Number(e.target.value), alertThresholdUnit)}
-              className={styles.alertThresholdInput}
-            />
-            <select
-              value={alertThresholdUnit}
-              onChange={(e) => {
-                const newUnit = e.target.value as 'hours' | 'minutes';
-                const newValue =
-                  alertThresholdUnit === 'hours' && newUnit === 'minutes'
-                    ? alertThresholdValue * 60
-                    : alertThresholdUnit === 'minutes' && newUnit === 'hours'
-                      ? Math.round(alertThresholdValue / 60)
-                      : alertThresholdValue;
-                setAlertThreshold(Math.max(1, newValue), newUnit);
-              }}
-            >
-              <option value='minutes'>{t('minutes')}</option>
-              <option value='hours'>{t('hours')}</option>
-            </select>
-          </label>
+      {!resolvedAddress && (
+        <div className={styles.header}>
+          <div className={styles.title}>{t('moderation_queue')}</div>
         </div>
-      </div>
+      )}
 
-      {!resolvedAddress && <ModQueueBoardFilter subplebbits={subplebbitsWithMetadata} />}
+      <div className={styles.controls}>
+        {!resolvedAddress ? (
+          <>
+            <div className={styles.controlsLeft}>
+              <ModQueueBoardFilter subplebbits={subplebbitsWithMetadata} />
+            </div>
+            <div className={styles.controlsRight}>{alertThresholdControl}</div>
+          </>
+        ) : (
+          <>
+            <div className={styles.controlsLeft}>
+              <div className={styles.title}>{t('moderation_queue')}</div>
+            </div>
+            <div className={styles.controlsRight}>{alertThresholdControl}</div>
+          </>
+        )}
+      </div>
 
       {feed.length === 0 && !hasMore ? (
         <div className={styles.empty}>{t('queue_is_empty')}</div>