From 480292dc016c3e271605db8d566d15fd238184b0 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 20 Mar 2025 19:02:46 +0200
Subject: [PATCH] style(next)/options/appearance/fonts: refactor input groups

---
 .../type_widgets/options/appearance/fonts.ts     | 16 ++++++++--------
 src/public/stylesheets/theme-next/pages.css      | 16 ----------------
 2 files changed, 8 insertions(+), 24 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/fonts.ts b/src/public/app/widgets/type_widgets/options/appearance/fonts.ts
index 1cc8f8135..55894c64e 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/fonts.ts
+++ b/src/public/app/widgets/type_widgets/options/appearance/fonts.ts
@@ -65,10 +65,10 @@ const TPL = `
         <div class="col-6">
             <label for="main-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group main-font-size-input-group">
+            <label class="input-group tn-number-unit-pair main-font-size-input-group">
                 <input id="main-font-size" type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -83,10 +83,10 @@ const TPL = `
         <div class="col-6">
             <label for="tree-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group tree-font-size-input-group">
+            <label class="input-group tn-number-unit-pair tree-font-size-input-group">
                 <input id="tree-font-size" type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -101,10 +101,10 @@ const TPL = `
         <div class="col-6">
             <label for="detail-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group detail-font-size-input-group">
+            <label class="input-group tn-number-unit-pair detail-font-size-input-group">
                 <input id="detail-font-size" type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
@@ -119,10 +119,10 @@ const TPL = `
         <div class="col-6">
             <label for="monospace-font-size">${t("fonts.size")}</label>
 
-            <div class="input-group monospace-font-size-input-group">
+            <label class="input-group tn-number-unit-pair monospace-font-size-input-group">
                 <input id="monospace-font-size" type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 
diff --git a/src/public/stylesheets/theme-next/pages.css b/src/public/stylesheets/theme-next/pages.css
index dd90ea67f..74c576b74 100644
--- a/src/public/stylesheets/theme-next/pages.css
+++ b/src/public/stylesheets/theme-next/pages.css
@@ -227,22 +227,6 @@ div.note-detail-empty {
     font-size: .85em;
 }
 
-/* Appeareance */
-
-.main-font-size-input-group,
-.tree-font-size-input-group,
-.detail-font-size-input-group,
-.monospace-font-size-input-group {
-    width: fit-content;
-}
-
-#main-font-size,
-#tree-font-size,
-#detail-font-size,
-#monospace-font-size {
-    width: 8ch !important;
-}
-
 /* Shortcuts */
 
 .note-detail-content-widget-content:has(.shortcuts-options-section) {