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

@@ -207,8 +207,39 @@
           </div>
         </li>
         <li>
+          <UnitSetting
+            path="emojiSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
         <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
-          <ul class="setting-list">
         <li>
           <FontControl
             :model-value="mergedConfig.theme3hacks.fonts.interface"
@@ -249,41 +280,6 @@
             @update:modelValue="v => updateFont('monospace', v)"
           />
         </li>
-          </ul>
-        </li>
-        <li>
-          <UnitSetting
-            path="emojiSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 32, 'rem': 2.2 }"
-          >
-            {{ $t('settings.emoji_size') }}
-          </UnitSetting>
-          <ul
-            class="setting-list suboptions"
-          >
-            <li>
-              <FloatSetting
-                v-if="user"
-                path="emojiReactionsScale"
-                expert="1"
-              >
-                {{ $t('settings.emoji_reactions_scale') }}
-              </FloatSetting>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <UnitSetting
-            path="navbarSize"
-            :step="0.1"
-            :units="['px', 'rem']"
-            :reset-default="{ 'px': 55, 'rem': 3.5 }"
-          >
-            {{ $t('settings.navbar_size') }}
-          </UnitSetting>
-        </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",