From b705e24a97c8f697aa96dfeba21694109f9a1f24 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 20 Mar 2025 18:58:19 +0200
Subject: [PATCH] style(next): tweak number input groups

---
 .../options/appearance/max_content_width.ts   |  4 ++--
 .../code_notes/code_auto_read_only_size.ts    |  4 ++--
 .../type_widgets/options/images/images.ts     |  8 ++++----
 .../options/other/revision_snapshots_limit.ts |  4 ++--
 .../app/widgets/type_widgets/options/sync.ts  |  4 ++--
 .../options/text_notes/table_of_contents.ts   |  4 ++--
 .../text_notes/text_auto_read_only_size.ts    |  4 ++--
 src/public/stylesheets/theme-next/forms.css   | 19 +++++++++++++++++++
 8 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts
index 92c88d0f2..9be4cb942 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts
+++ b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.ts
@@ -14,10 +14,10 @@ const TPL = `
     <div class="form-group row">
         <div class="col-md-6">
             <label for="max-content-width">${t("max_content_width.max_width_label")}</label>
-            <div class="input-group">
+            <label class="input-group tn-number-unit-pair">
                 <input id="max-content-width" type="number" min="${MIN_VALUE}" step="10" class="max-content-width form-control options-number-input">
                 <span class="input-group-text">${t("max_content_width.max_width_unit")}</span>
-            </div>
+            </label>
         </div>
     </div>
 
diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts b/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
index a80fd11dd..7e6473919 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
+++ b/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.ts
@@ -10,10 +10,10 @@ const TPL = `
 
     <div class="form-group">
         <label for="auto-readonly-size-code">${t("code_auto_read_only_size.label")}</label>
-        <div class="input-group">
+        <label class="input-group tn-number-unit-pair">
             <input id="auto-readonly-size-code" class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
             <span class="input-group-text">${t("code_auto_read_only_size.unit")}</span>
-        </div>
+        </label>
     </div>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/images/images.ts b/src/public/app/widgets/type_widgets/options/images/images.ts
index c10b29278..bc686d01f 100644
--- a/src/public/app/widgets/type_widgets/options/images/images.ts
+++ b/src/public/app/widgets/type_widgets/options/images/images.ts
@@ -30,18 +30,18 @@ const TPL = `
     <div class="image-compression-enabled-wraper">
         <div class="form-group">
             <label>${t("images.max_image_dimensions")}</label>
-            <div class="input-group">
+            <label class="input-group tn-number-unit-pair">
                 <input class="image-max-width-height form-control options-number-input" type="number" min="1">
                 <span class="input-group-text">${t("images.max_image_dimensions_unit")}</span>
-            </div>
+            </label>
         </div>
 
         <div class="form-group">
             <label>${t("images.jpeg_quality_description")}</label>
-            <div class="input-group">
+            <label class="input-group tn-number-unit-pair">
                 <input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
                 <span class="input-group-text">%</span>
-            </div>
+            </label>
         </div>
     </div>
 </div>
diff --git a/src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts b/src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts
index 32d01a0b4..e59b6b503 100644
--- a/src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts
+++ b/src/public/app/widgets/type_widgets/options/other/revision_snapshots_limit.ts
@@ -12,10 +12,10 @@ const TPL = `
 
     <div class="form-group">
         <label>${t("revisions_snapshot_limit.snapshot_number_limit_label")}</label>
-        <div class="input-group">
+        <label class="input-group tn-number-unit-pair">
             <input class="revision-snapshot-number-limit form-control options-number-input" type="number" min="-1">
             <span class="input-group-text">${t("revisions_snapshot_limit.snapshot_number_limit_unit")}</span>
-        </div>
+        </label>
     </div>
 
     <button class="erase-excess-revision-snapshots-now-button btn btn-sm">
diff --git a/src/public/app/widgets/type_widgets/options/sync.ts b/src/public/app/widgets/type_widgets/options/sync.ts
index 6d1f3a892..43c594d25 100644
--- a/src/public/app/widgets/type_widgets/options/sync.ts
+++ b/src/public/app/widgets/type_widgets/options/sync.ts
@@ -16,10 +16,10 @@ const TPL = `
 
         <div class="form-group">
             <label for="sync-server-timeout">${t("sync_2.timeout")}</label>
-            <div class="input-group">
+            <label class="input-group tn-number-unit-pair">
                 <input id="sync-server-timeout" class="sync-server-timeout form-control" min="1" max="10000000" type="number" style="text-align: left;">
                 <span class="input-group-text">${t("sync_2.timeout_unit")}</span>
-            </div>
+            </label>
         </div>
 
         <div class="form-group">
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
index c29472206..abb09ccb5 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
+++ b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.ts
@@ -9,10 +9,10 @@ const TPL = `
     ${t("table_of_contents.description")}
 
     <div class="form-group">
-        <div class="input-group">
+        <label class="input-group tn-number-unit-pair">
             <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
             <span class="input-group-text">${t("table_of_contents.unit")}</span>
-        </div>
+        </label>
     </div>
 
     <p class="form-text">${t("table_of_contents.disable_info")}</p>
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
index d719d688d..20e3a704b 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
+++ b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.ts
@@ -10,10 +10,10 @@ const TPL = `
 
     <div class="form-group">
         <label for="auto-readonly-size-text">${t("text_auto_read_only_size.label")}</label>
-        <div class="input-group">
+        <label class="input-group tn-number-unit-pair">
             <input id="auto-readonly-size-text" class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
             <span class="input-group-text">${t("text_auto_read_only_size.unit")}</span>
-        </div>
+        </label>
     </div>
 </div>`;
 
diff --git a/src/public/stylesheets/theme-next/forms.css b/src/public/stylesheets/theme-next/forms.css
index 801556141..671a90997 100644
--- a/src/public/stylesheets/theme-next/forms.css
+++ b/src/public/stylesheets/theme-next/forms.css
@@ -220,6 +220,7 @@ input::selection,
     border-radius: 6px;
     padding-right: 8px;
     color: var(--quick-search-color);
+    flex-wrap: nowrap;
 }
 
 .input-group:hover {
@@ -302,6 +303,24 @@ input::selection,
     font-style: italic;
 }
 
+/*
+    Numeric input with measurement unit as a sufix
+
+    <label class="input-group tn-number-unit-pair">
+        <input ... >
+        <span class="input-group-text">meters</span>
+    </label>
+*/
+
+label.input-group.tn-number-unit-pair {
+    width: fit-content;
+}
+
+label.input-group.tn-number-unit-pair input {
+    width: 120px !important;
+    padding-inline-end: 0;
+}
+
 /* Combo box-like dropdown buttons */
 
 .select-button.dropdown-toggle::after {