font control style update

src/components/font_control/font_control.vue

@@ -5,18 +5,22 @@
       :for="manualEntry ? name : name + '-font-switcher'"
       class="label"
     >
-      {{ label }}
+      {{ $t('settings.style.themes3.font.label', { label }) }}
     </label>
     {{ ' ' }}
     <Checkbox
       v-if="typeof fallback !== 'undefined'"
+      class="font-checkbox"
       :id="name + '-o'"
       :model-value="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
       {{ $t('settings.style.themes3.define') }}
     </Checkbox>
-    <p v-if="modelValue?.family">
+    <div
+      v-if="modelValue?.family"
+      class="font-input"
+    >
       <label
         v-if="manualEntry"
         :id="name + '-label'"
@@ -122,7 +126,7 @@
           </optgroup>
         </Select>
       </span>
-    </p>
+    </div>
   </div>
 </template>
 
@@ -134,6 +138,15 @@
     min-width: 20em;
     max-width: 20em;
   }
+
+  .font-input {
+    margin-left: 2em;
+    margin-top: 0.5em;
+  }
+
+  .font-checkbox {
+    margin-left: 1em;
+  }
 }
 
 .invalid-tooltip {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -206,51 +206,6 @@
             </small>
           </div>
         </li>
-        <li>
-          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-          <ul class="setting-list">
-            <li>
-              <FontControl
-                :model-value="mergedConfig.theme3hacks.fonts.interface"
-                name="ui"
-                :label="$t('settings.style.fonts.components.interface')"
-                :fallback="{ family: 'sans-serif' }"
-                no-inherit="1"
-                @update:modelValue="v => updateFont('interface', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.input"
-                name="input"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => updateFont('input', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.post"
-                name="post"
-                :fallback="{ family: 'inherit' }"
-                :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => updateFont('post', v)"
-              />
-            </li>
-            <li>
-              <FontControl
-                v-if="expertLevel > 0"
-                :model-value="mergedConfig.theme3hacks.fonts.monospace"
-                name="postCode"
-                :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.monospace')"
-                @update:modelValue="v => updateFont('monospace', v)"
-              />
-            </li>
-          </ul>
-        </li>
         <li>
           <UnitSetting
             path="emojiSize"
@@ -284,6 +239,47 @@
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
         </li>
+        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:modelValue="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:modelValue="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:modelValue="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:modelValue="v => updateFont('monospace', v)"
+          />
+        </li>
         <h3>{{ $t('settings.columns') }}</h3>
         <li>
           <UnitSetting

src/i18n/en.json

@@ -868,7 +868,8 @@
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
           "entry": "Enter {fontFamily}",
-          "select": "Select font"
+          "select": "Select font",
+          "label": "{label} font"
         }
       },
       "interface_font_user_override": "Override theme/browser font used",