diff --git a/css/80_app.css b/css/80_app.css
index 1701ccbab..a0b59583f 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -3546,10 +3546,14 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin: 5px;
 }
 
+.display-control .control-wrap {
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
 .display-control .display-option-input {
     height: 20px;
-    width: 155px;
-    max-width: 100%;
+    flex: 1 1 100%;
 }
 
 .display-control button {
@@ -3559,6 +3563,7 @@ li.issue-fix-item:not(.actionable) .fix-icon {
     margin-right: 0px;
     vertical-align: text-bottom;
     border-radius: 4px;
+    flex: 0 0 auto;
 }
 .ideditor[dir='rtl'] .display-control button {
     margin-left: 0px;
diff --git a/modules/ui/sections/background_display_options.js b/modules/ui/sections/background_display_options.js
index d932c3050..03bfb9c26 100644
--- a/modules/ui/sections/background_display_options.js
+++ b/modules/ui/sections/background_display_options.js
@@ -74,7 +74,11 @@ export function uiSectionBackgroundDisplayOptions(context) {
             .append('span')
             .attr('class', function(d) { return 'display-option-value display-option-value-' + d; });
 
-        slidersEnter
+        var sildersControlEnter = slidersEnter
+            .append('div')
+            .attr('class', 'control-wrap');
+
+        sildersControlEnter
             .append('input')
             .attr('class', function(d) { return 'display-option-input display-option-input-' + d; })
             .attr('type', 'range')
@@ -86,7 +90,7 @@ export function uiSectionBackgroundDisplayOptions(context) {
                 updateValue(d, val);
             });
 
-        slidersEnter
+        sildersControlEnter
             .append('button')
             .attr('title', t('background.reset'))
             .attr('class', function(d) { return 'display-option-reset display-option-reset-' + d; })