style(next): tweak number input groups

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>
 

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>`;
 

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>

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">

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">

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>

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>`;
 

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 {