diff --git a/src/public/app/widgets/type_widgets/options/appearance/fonts.js b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
index 1986f790fb..d1ce6ce0cb 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/fonts.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/fonts.js
@@ -43,7 +43,7 @@ const TPL = `
             <label>Size</label>
 
             <div class="input-group">
-                <input type="number" class="main-font-size form-control" min="50" max="200" step="10"/>
+                <input type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <div class="input-group-append">
                     <span class="input-group-text">%</span>
                 </div>
@@ -63,7 +63,7 @@ const TPL = `
             <label>Size</label>
 
             <div class="input-group">
-                <input type="number" class="tree-font-size form-control" min="50" max="200" step="10"/>
+                <input type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <div class="input-group-append">
                     <span class="input-group-text">%</span>
                 </div>
@@ -83,7 +83,7 @@ const TPL = `
             <label>Size</label>
 
             <div class="input-group">
-                <input type="number" class="detail-font-size form-control" min="50" max="200" step="10"/>
+                <input type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <div class="input-group-append">
                     <span class="input-group-text">%</span>
                 </div>
@@ -103,7 +103,7 @@ const TPL = `
             <label>Size</label>
 
             <div class="input-group">
-                <input type="number" class="monospace-font-size form-control" min="50" max="200" step="10"/>
+                <input type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
                 <div class="input-group-append">
                     <span class="input-group-text">%</span>
                 </div>
diff --git a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
index 6b27b50d60..ddf692a474 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/max_content_width.js
@@ -10,7 +10,7 @@ const TPL = `
     <div class="form-group row">
         <div class="col-4">
             <label>Max content width in pixels</label>
-            <input type="number" min="200" step="10" class="max-content-width form-control">
+            <input type="number" min="200" step="10" class="max-content-width form-control options-number-input">
         </div>
     </div>
     
diff --git a/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js b/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
index 4546919d3d..f6e07abc69 100644
--- a/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
+++ b/src/public/app/widgets/type_widgets/options/appearance/zoom_factor.js
@@ -6,7 +6,7 @@ const TPL = `
 <div class="options-section">
     <h4>Zoom factor (desktop build only)</h4>
 
-    <input type="number" class="zoom-factor-select form-control" min="0.3" max="2.0" step="0.1"/>
+    <input type="number" class="zoom-factor-select form-control options-number-input" min="0.3" max="2.0" step="0.1"/>
     <p>Zooming can be controlled with CTRL+- and CTRL+= shortcuts as well.</p>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js b/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
index 5722d4c20b..8925b87e89 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/code_auto_read_only_size.js
@@ -8,7 +8,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Automatic read-only size (code notes)</label>
-        <input class="auto-readonly-size-code form-control" type="number" min="0">
+        <input class="auto-readonly-size-code form-control options-number-input" type="number" min="0">
     </div>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/images/images.js b/src/public/app/widgets/type_widgets/options/images/images.js
index c6ceb6e040..ca8f287101 100644
--- a/src/public/app/widgets/type_widgets/options/images/images.js
+++ b/src/public/app/widgets/type_widgets/options/images/images.js
@@ -26,12 +26,12 @@ const TPL = `
     <div class="image-compression-enabled-wraper">
         <div class="form-group">
             <label>Max width / height of an image in pixels (image will be resized if it exceeds this setting).</label>
-            <input class="image-max-width-height form-control" type="number" min="1">
+            <input class="image-max-width-height form-control options-number-input" type="number" min="1">
         </div>
     
         <div class="form-group">
             <label>JPEG quality (10 - worst quality, 100 best quality, 50 - 85 is recommended)</label>
-            <input class="image-jpeg-quality form-control" min="10" max="100" type="number">
+            <input class="image-jpeg-quality form-control options-number-input" min="10" max="100" type="number">
         </div>
     </div>
 </div>
diff --git a/src/public/app/widgets/type_widgets/options/other/attachment_erasure_timeout.js b/src/public/app/widgets/type_widgets/options/other/attachment_erasure_timeout.js
index b78fde5a29..347eb64f21 100644
--- a/src/public/app/widgets/type_widgets/options/other/attachment_erasure_timeout.js
+++ b/src/public/app/widgets/type_widgets/options/other/attachment_erasure_timeout.js
@@ -10,7 +10,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Erase attachments after X seconds of not being used in its note</label>
-        <input class="erase-unused-attachments-after-time-in-seconds form-control" type="number" min="0">
+        <input class="erase-unused-attachments-after-time-in-seconds form-control options-number-input" type="number" min="0">
     </div>
     
     <p>You can also trigger erasing manually (without considering the timeout defined above):</p>
diff --git a/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.js b/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.js
index 50bd8b9ced..1c991c4ae5 100644
--- a/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.js
+++ b/src/public/app/widgets/type_widgets/options/other/note_erasure_timeout.js
@@ -13,7 +13,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Erase notes after X seconds</label>
-        <input class="erase-entities-after-time-in-seconds form-control" type="number" min="0">
+        <input class="erase-entities-after-time-in-seconds form-control options-number-input" type="number" min="0">
     </div>
     
     <p>You can also trigger erasing manually (without considering the timeout defined above):</p>
diff --git a/src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.js b/src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.js
index 3a257a068b..226685607d 100644
--- a/src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.js
+++ b/src/public/app/widgets/type_widgets/options/other/revisions_snapshot_interval.js
@@ -8,7 +8,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Note revision snapshot time interval (in seconds)</label>
-        <input class="revision-snapshot-time-interval-in-seconds form-control" type="number" min="10">
+        <input class="revision-snapshot-time-interval-in-seconds form-control options-number-input" type="number" min="10">
     </div>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/password.js b/src/public/app/widgets/type_widgets/options/password.js
index f34870abc9..794042171f 100644
--- a/src/public/app/widgets/type_widgets/options/password.js
+++ b/src/public/app/widgets/type_widgets/options/password.js
@@ -41,7 +41,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Protected session timeout (in seconds)</label>
-        <input class="protected-session-timeout-in-seconds form-control" type="number" min="60">
+        <input class="protected-session-timeout-in-seconds form-control options-number-input" type="number" min="60">
     </div>
 </div>`;
 
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js
index a5fa1083f5..4372ba6c4a 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/table_of_contents.js
@@ -7,7 +7,7 @@ const TPL = `
     Table of contents will appear in text notes when the note has more than a defined number of headings. You can customize this number:
     
     <div class="form-group">
-        <input type="number" class="min-toc-headings form-control" min="0" max="9999999999999999" step="1" style="text-align: right;"/>
+        <input type="number" class="min-toc-headings form-control options-number-input options-number-input" min="0" max="9999999999999999" step="1" />
     </div>
     
     <p>You can also use this option to effectively disable TOC by setting a very high number.</p>
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
index c72640e73e..275ee8b1a6 100644
--- a/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
+++ b/src/public/app/widgets/type_widgets/options/text_notes/text_auto_read_only_size.js
@@ -8,7 +8,7 @@ const TPL = `
 
     <div class="form-group">
         <label>Automatic read-only size (text notes)</label>
-        <input class="auto-readonly-size-text form-control" type="number" min="0" style="text-align: right;">
+        <input class="auto-readonly-size-text form-control options-number-input" type="number" min="0">
     </div>
 </div>`;
 
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index e923eb90fd..0e70c4f177 100644
--- a/src/public/stylesheets/style.css
+++ b/src/public/stylesheets/style.css
@@ -1036,6 +1036,13 @@ button.close:hover {
     margin-bottom: 10px;
 }
 
+.options-number-input {
+    text-align: right;
+    /* overriding settings from .form-control */
+    width: 10em !important;
+    flex-grow: 0 !important;
+}
+
 textarea {
     cursor: auto;
 }