From 4ba1f98ab658d9d8b22192c2b173384eec866bb9 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 11 Jul 2024 08:25:24 -0400
Subject: [PATCH 1/2] refactor: slim down zoom controls

---
 src/components/buttons/Button.tsx               |  1 +
 src/components/settings/AppearanceSettings.tsx  | 12 ++++++------
 src/routes/__snapshots__/Settings.test.tsx.snap | 12 ++++++------
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index c51696b10..0b7e0054a 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -19,6 +19,7 @@ const buttonVariants = cva(
       },
       size: {
         default: 'min-w-20 h-10 px-4 py-1',
+        inline: 'h-5 rounded-md px-2 py-1',
         xs: 'h-7 rounded-md px-2 py-1',
         sm: 'h-9 rounded-md px-2 py-1',
         lg: 'h-11 rounded-md px-8',
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index f0de6d028..fbbef3aa9 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -63,10 +63,10 @@ export const AppearanceSettings: FC = () => {
         }}
         className="mb-0"
       />
-      <div className="flex">
+      <div className="flex items-center mb-3 mt-1 text-sm">
         <label
           htmlFor="Zoom"
-          className="mr-3 content-center font-medium text-sm text-gray-700 dark:text-gray-200"
+          className="mr-3 py-1 content-center font-medium text-gray-700 dark:text-gray-200"
         >
           Zoom:
         </label>
@@ -77,11 +77,11 @@ export const AppearanceSettings: FC = () => {
             webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10))
           }
           className="rounded-r-none"
-          size="xs"
+          size="inline"
         >
           -
         </Button>
-        <span className="flex w-16 items-center justify-center rounded-none border border-gray-300 bg-transparent text-sm text-gray-700 dark:text-gray-200">
+        <span className="flex w-16 h-5 items-center justify-center rounded-none border border-gray-300 bg-transparent text-xs text-gray-700 dark:text-gray-200">
           {zoomPercentage.toFixed(0)}%
         </span>
         <Button
@@ -91,7 +91,7 @@ export const AppearanceSettings: FC = () => {
             webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10))
           }
           className="rounded-none"
-          size="xs"
+          size="inline"
         >
           +
         </Button>
@@ -100,7 +100,7 @@ export const AppearanceSettings: FC = () => {
           onClick={() => webFrame.setZoomLevel(0)}
           variant="destructive"
           className="rounded-l-none"
-          size="xs"
+          size="inline"
         >
           X
         </Button>
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index c04f6dbc1..79f3d7229 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -155,35 +155,35 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="flex"
+        class="flex items-center mb-3 mt-1 text-sm"
       >
         <label
-          class="mr-3 content-center font-medium text-sm text-gray-700 dark:text-gray-200"
+          class="mr-3 py-1 content-center font-medium text-gray-700 dark:text-gray-200"
           for="Zoom"
         >
           Zoom:
         </label>
         <button
           aria-label="Zoom Out"
-          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1 rounded-r-none"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-5 rounded-md px-2 py-1 rounded-r-none"
         >
           -
         </button>
         <span
-          class="flex w-16 items-center justify-center rounded-none border border-gray-300 bg-transparent text-sm text-gray-700 dark:text-gray-200"
+          class="flex w-16 h-5 items-center justify-center rounded-none border border-gray-300 bg-transparent text-xs text-gray-700 dark:text-gray-200"
         >
           100
           %
         </span>
         <button
           aria-label="Zoom In"
-          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 px-2 py-1 rounded-none"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-5 px-2 py-1 rounded-none"
         >
           +
         </button>
         <button
           aria-label="Reset Zoom"
-          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-red-600 text-white hover:opacity-90 h-7 rounded-md px-2 py-1 rounded-l-none"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-red-600 text-white hover:opacity-90 h-5 rounded-md px-2 py-1 rounded-l-none"
         >
           X
         </button>

From 02585dba3419492472cb5b5769194fd1f0a4eef5 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 11 Jul 2024 08:48:33 -0400
Subject: [PATCH 2/2] refactor: space settings controls consistently

---
 src/components/fields/Checkbox.tsx            |  22 +-
 src/components/fields/RadioGroup.tsx          |   6 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |  40 +-
 .../__snapshots__/RadioGroup.test.tsx.snap    |  32 +-
 .../settings/AppearanceSettings.tsx           |   5 +-
 .../__snapshots__/Filters.test.tsx.snap       | 522 ++++++++----------
 .../__snapshots__/Settings.test.tsx.snap      | 250 ++++-----
 7 files changed, 377 insertions(+), 500 deletions(-)

diff --git a/src/components/fields/Checkbox.tsx b/src/components/fields/Checkbox.tsx
index c39873be2..ff4d6162e 100644
--- a/src/components/fields/Checkbox.tsx
+++ b/src/components/fields/Checkbox.tsx
@@ -13,18 +13,16 @@ export interface ICheckbox {
 
 export const Checkbox: FC<ICheckbox> = (props: ICheckbox) => {
   return (
-    <div className="mb-3 mt-1 text-sm">
-      <div className="flex items-start">
-        <div className="flex h-5 items-center">
-          <input
-            type="checkbox"
-            id={props.name}
-            className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-            checked={props.checked}
-            onChange={props.onChange}
-            disabled={props.disabled}
-          />
-        </div>
+    <div className="mt-3 mb-2 text-sm">
+      <div className="flex items-center">
+        <input
+          type="checkbox"
+          id={props.name}
+          className="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+          checked={props.checked}
+          onChange={props.onChange}
+          disabled={props.disabled}
+        />
 
         <div className="ml-3">
           <label
diff --git a/src/components/fields/RadioGroup.tsx b/src/components/fields/RadioGroup.tsx
index 9e59db259..e373af9b5 100644
--- a/src/components/fields/RadioGroup.tsx
+++ b/src/components/fields/RadioGroup.tsx
@@ -15,9 +15,9 @@ export interface IRadioGroup {
 
 export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
   return (
-    <div className={cn('mb-3 mt-1 text-sm', props.className)}>
+    <div className={cn('mt-3 mb-2 text-sm', props.className)}>
       <div className="flex items-start">
-        <div className="mr-3 py-1">
+        <div className="mr-3">
           <label
             htmlFor={props.name}
             className="font-medium text-gray-700 dark:text-gray-200"
@@ -37,7 +37,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           {props.options.map((item) => {
             return (
               <div
-                className="mt-1 flex items-center"
+                className="flex items-center"
                 key={`radio_item_${item.value.toLowerCase()}`}
               >
                 <input
diff --git a/src/components/fields/__snapshots__/Checkbox.test.tsx.snap b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
index b2d9b1c0c..037410dce 100644
--- a/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/components/fields/__snapshots__/Checkbox.test.tsx.snap
@@ -6,21 +6,17 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="appearance"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="appearance"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -42,21 +38,17 @@ exports[`components/fields/Checkbox.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mb-3 mt-1 text-sm"
+      class="mt-3 mb-2 text-sm"
     >
       <div
-        class="flex items-start"
+        class="flex items-center"
       >
-        <div
-          class="flex h-5 items-center"
-        >
-          <input
-            checked=""
-            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-            id="appearance"
-            type="checkbox"
-          />
-        </div>
+        <input
+          checked=""
+          class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+          id="appearance"
+          type="checkbox"
+        />
         <div
           class="ml-3"
         >
diff --git a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
index 9d4bebc7f..d4d77a3cc 100644
--- a/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/components/fields/__snapshots__/RadioGroup.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="mr-3 py-1"
+            class="mr-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -27,7 +27,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
             role="group"
           >
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -44,7 +44,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
               </label>
             </div>
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 checked=""
@@ -73,13 +73,13 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mb-3 mt-1 text-sm"
+      class="mt-3 mb-2 text-sm"
     >
       <div
         class="flex items-start"
       >
         <div
-          class="mr-3 py-1"
+          class="mr-3"
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
@@ -94,7 +94,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
           role="group"
         >
           <div
-            class="mt-1 flex items-center"
+            class="flex items-center"
           >
             <input
               class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -111,7 +111,7 @@ exports[`components/fields/RadioGroup.tsx should render 1`] = `
             </label>
           </div>
           <div
-            class="mt-1 flex items-center"
+            class="flex items-center"
           >
             <input
               checked=""
@@ -197,13 +197,13 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="mr-3 py-1"
+            class="mr-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -219,7 +219,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
             role="group"
           >
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -237,7 +237,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
               </label>
             </div>
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 checked=""
@@ -267,13 +267,13 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
   </body>,
   "container": <div>
     <div
-      class="mb-3 mt-1 text-sm"
+      class="mt-3 mb-2 text-sm"
     >
       <div
         class="flex items-start"
       >
         <div
-          class="mr-3 py-1"
+          class="mr-3"
         >
           <label
             class="font-medium text-gray-700 dark:text-gray-200"
@@ -289,7 +289,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
           role="group"
         >
           <div
-            class="mt-1 flex items-center"
+            class="flex items-center"
           >
             <input
               class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -307,7 +307,7 @@ exports[`components/fields/RadioGroup.tsx should render as disabled 1`] = `
             </label>
           </div>
           <div
-            class="mt-1 flex items-center"
+            class="flex items-center"
           >
             <input
               checked=""
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index fbbef3aa9..7d2f4cf6c 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -61,12 +61,11 @@ export const AppearanceSettings: FC = () => {
         onChange={(evt) => {
           updateSetting('theme', evt.target.value as Theme);
         }}
-        className="mb-0"
       />
-      <div className="flex items-center mb-3 mt-1 text-sm">
+      <div className="flex items-center mt-3 mb-2 text-sm">
         <label
           htmlFor="Zoom"
-          className="mr-3 py-1 content-center font-medium text-gray-700 dark:text-gray-200"
+          className="mr-3 content-center font-medium text-gray-700 dark:text-gray-200"
         >
           Zoom:
         </label>
diff --git a/src/routes/__snapshots__/Filters.test.tsx.snap b/src/routes/__snapshots__/Filters.test.tsx.snap
index 33eae1d63..66b1f4eee 100644
--- a/src/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/routes/__snapshots__/Filters.test.tsx.snap
@@ -81,20 +81,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         Users
       </legend>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="hideBots"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="hideBots"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -157,20 +153,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         Note: if no reasons are selected, all notifications will be shown.
       </span>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="approval_requested"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="approval_requested"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -204,20 +196,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="assign"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="assign"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -251,20 +239,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="author"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="author"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -298,20 +282,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="ci_activity"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="ci_activity"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -345,20 +325,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="comment"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="comment"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -392,20 +368,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="invitation"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="invitation"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -439,20 +411,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="manual"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="manual"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -486,20 +454,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="member_feature_requested"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="member_feature_requested"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -533,20 +497,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="mention"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="mention"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -580,20 +540,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="review_requested"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="review_requested"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -627,20 +583,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="security_advisory_credit"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="security_advisory_credit"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -674,20 +626,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="security_alert"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="security_alert"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -721,20 +669,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="state_change"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="state_change"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -768,20 +712,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="subscribed"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="subscribed"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -815,20 +755,16 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="team_mention"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="team_mention"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -897,148 +833,148 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
 
 exports[`routes/Filters.tsx Reasons section should be able to toggle reason type - none already set 1`] = `
 <div
-  class="flex items-start"
+  class="mt-3 mb-2 text-sm"
 >
   <div
-    class="flex h-5 items-center"
+    class="flex items-center"
   >
     <input
       class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
       id="mention"
       type="checkbox"
     />
-  </div>
-  <div
-    class="ml-3"
-  >
-    <label
-      class="font-medium text-gray-700 dark:text-gray-200"
-      for="mention"
+    <div
+      class="ml-3"
     >
-      Mentioned
-      <span
-        aria-label="tooltip-mention"
-        class="relative"
-        id="tooltip-mention"
+      <label
+        class="font-medium text-gray-700 dark:text-gray-200"
+        for="mention"
       >
-        <svg
-          aria-hidden="true"
-          class="ml-1 text-blue-500"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="16"
+        Mentioned
+        <span
+          aria-label="tooltip-mention"
+          class="relative"
+          id="tooltip-mention"
         >
-          <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </span>
-    </label>
+          <svg
+            aria-hidden="true"
+            class="ml-1 text-blue-500"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
 
 exports[`routes/Filters.tsx Reasons section should be able to toggle reason type - some filters already set 1`] = `
 <div
-  class="flex items-start"
+  class="mt-3 mb-2 text-sm"
 >
   <div
-    class="flex h-5 items-center"
+    class="flex items-center"
   >
     <input
       class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
       id="mention"
       type="checkbox"
     />
-  </div>
-  <div
-    class="ml-3"
-  >
-    <label
-      class="font-medium text-gray-700 dark:text-gray-200"
-      for="mention"
+    <div
+      class="ml-3"
     >
-      Mentioned
-      <span
-        aria-label="tooltip-mention"
-        class="relative"
-        id="tooltip-mention"
+      <label
+        class="font-medium text-gray-700 dark:text-gray-200"
+        for="mention"
       >
-        <svg
-          aria-hidden="true"
-          class="ml-1 text-blue-500"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="16"
+        Mentioned
+        <span
+          aria-label="tooltip-mention"
+          class="relative"
+          id="tooltip-mention"
         >
-          <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </span>
-    </label>
+          <svg
+            aria-hidden="true"
+            class="ml-1 text-blue-500"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
 
 exports[`routes/Filters.tsx Users section should be able to toggle the hideBots checkbox when detailedNotifications is enabled 1`] = `
 <div
-  class="flex items-start"
+  class="mt-3 mb-2 text-sm"
 >
   <div
-    class="flex h-5 items-center"
+    class="flex items-center"
   >
     <input
       class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
       id="hideBots"
       type="checkbox"
     />
-  </div>
-  <div
-    class="ml-3"
-  >
-    <label
-      class="font-medium text-gray-700 dark:text-gray-200"
-      for="hideBots"
+    <div
+      class="ml-3"
     >
-      Hide notifications from Bot accounts
-      <span
-        aria-label="tooltip-hideBots"
-        class="relative"
-        id="tooltip-hideBots"
+      <label
+        class="font-medium text-gray-700 dark:text-gray-200"
+        for="hideBots"
       >
-        <svg
-          aria-hidden="true"
-          class="ml-1 text-blue-500"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="16"
+        Hide notifications from Bot accounts
+        <span
+          aria-label="tooltip-hideBots"
+          class="relative"
+          id="tooltip-hideBots"
         >
-          <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </span>
-    </label>
+          <svg
+            aria-hidden="true"
+            class="ml-1 text-blue-500"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
 
 exports[`routes/Filters.tsx Users section should not be able to toggle the hideBots checkbox when detailedNotifications is disabled 1`] = `
 <div
-  class="flex items-start"
+  class="mt-3 mb-2 text-sm"
 >
   <div
-    class="flex h-5 items-center"
+    class="flex items-center"
   >
     <input
       class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -1046,37 +982,37 @@ exports[`routes/Filters.tsx Users section should not be able to toggle the hideB
       id="hideBots"
       type="checkbox"
     />
-  </div>
-  <div
-    class="ml-3"
-  >
-    <label
-      class="font-medium text-gray-700 dark:text-gray-200"
-      for="hideBots"
-      style="text-decoration: line-through;"
+    <div
+      class="ml-3"
     >
-      Hide notifications from Bot accounts
-      <span
-        aria-label="tooltip-hideBots"
-        class="relative"
-        id="tooltip-hideBots"
+      <label
+        class="font-medium text-gray-700 dark:text-gray-200"
+        for="hideBots"
+        style="text-decoration: line-through;"
       >
-        <svg
-          aria-hidden="true"
-          class="ml-1 text-blue-500"
-          fill="currentColor"
-          focusable="false"
-          height="16"
-          style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-          viewBox="0 0 16 16"
-          width="16"
+        Hide notifications from Bot accounts
+        <span
+          aria-label="tooltip-hideBots"
+          class="relative"
+          id="tooltip-hideBots"
         >
-          <path
-            d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
-          />
-        </svg>
-      </span>
-    </label>
+          <svg
+            aria-hidden="true"
+            class="ml-1 text-blue-500"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
+            viewBox="0 0 16 16"
+            width="16"
+          >
+            <path
+              d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.92 6.085h.001a.749.749 0 1 1-1.342-.67c.169-.339.436-.701.849-.977C6.845 4.16 7.369 4 8 4a2.756 2.756 0 0 1 1.637.525c.503.377.863.965.863 1.725 0 .448-.115.83-.329 1.15-.205.307-.47.513-.692.662-.109.072-.22.138-.313.195l-.006.004a6.24 6.24 0 0 0-.26.16.952.952 0 0 0-.276.245.75.75 0 0 1-1.248-.832c.184-.264.42-.489.692-.661.103-.067.207-.132.313-.195l.007-.004c.1-.061.182-.11.258-.161a.969.969 0 0 0 .277-.245C8.96 6.514 9 6.427 9 6.25a.612.612 0 0 0-.262-.525A1.27 1.27 0 0 0 8 5.5c-.369 0-.595.09-.74.187a1.01 1.01 0 0 0-.34.398ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            />
+          </svg>
+        </span>
+      </label>
+    </div>
   </div>
 </div>
 `;
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 79f3d7229..c15485145 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -79,13 +79,13 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         Appearance
       </legend>
       <div
-        class="mt-1 text-sm mb-0"
+        class="mt-3 mb-2 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="mr-3 py-1"
+            class="mr-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -100,7 +100,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             role="group"
           >
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 checked=""
@@ -118,7 +118,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
               </label>
             </div>
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -135,7 +135,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
               </label>
             </div>
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -155,10 +155,10 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="flex items-center mb-3 mt-1 text-sm"
+        class="flex items-center mt-3 mb-2 text-sm"
       >
         <label
-          class="mr-3 py-1 content-center font-medium text-gray-700 dark:text-gray-200"
+          class="mr-3 content-center font-medium text-gray-700 dark:text-gray-200"
           for="Zoom"
         >
           Zoom:
@@ -189,21 +189,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </button>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="detailedNotifications"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="detailedNotifications"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -237,21 +233,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showPills"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showPills"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -285,21 +277,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showNumber"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showNumber"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -333,20 +321,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showAccountHostname"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showAccountHostname"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -382,13 +366,13 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         Notifications
       </legend>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
           class="flex items-start"
         >
           <div
-            class="mr-3 py-1"
+            class="mr-3"
           >
             <label
               class="font-medium text-gray-700 dark:text-gray-200"
@@ -403,7 +387,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             role="group"
           >
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 checked=""
@@ -421,7 +405,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
               </label>
             </div>
             <div
-              class="mt-1 flex items-center"
+              class="flex items-center"
             >
               <input
                 class="size-4 border-gray-300 text-indigo-600 focus:ring-indigo-500"
@@ -441,20 +425,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showOnlyParticipating"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showOnlyParticipating"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -488,20 +468,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="markAsDoneOnOpen"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="markAsDoneOnOpen"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -515,20 +491,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="delayNotificationState"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="delayNotificationState"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -584,21 +556,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         System
       </legend>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="kbdShortcutEnabled"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="kbdShortcutEnabled"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -632,20 +600,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showNotificationsCountInTray"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showNotificationsCountInTray"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -659,21 +623,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="showNotifications"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="showNotifications"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -687,21 +647,17 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              checked=""
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="playSound"
-              type="checkbox"
-            />
-          </div>
+          <input
+            checked=""
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="playSound"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >
@@ -715,20 +671,16 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-3 mt-1 text-sm"
+        class="mt-3 mb-2 text-sm"
       >
         <div
-          class="flex items-start"
+          class="flex items-center"
         >
-          <div
-            class="flex h-5 items-center"
-          >
-            <input
-              class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
-              id="openAtStartUp"
-              type="checkbox"
-            />
-          </div>
+          <input
+            class="size-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+            id="openAtStartUp"
+            type="checkbox"
+          />
           <div
             class="ml-3"
           >