diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index a374184b3ac51a4c4b591233e28157a078d2a1d5..dd0490235ea44082496c1ca99612013b808dcd59 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -71,9 +71,13 @@
   &.-no-preview {
     .shadow-tweak {
       order: 0;
-      flex: 2 0 20em;
+      flex: 2 0 8em;
       max-width: 100%;
     }
+
+    .input-range {
+      min-width: 5em;
+    }
   }
 
   .inset-alert {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index af24f15abe69a738f33881d38c29e2b4c22c62aa..e1d201914b2d9c0a73dba37877fe427f09ceff86 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -167,7 +167,7 @@
           :disabled="disabled || !present || (separateInset && !selected?.inset)"
           :class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
           name="spread"
-          class="input input-number -small"
+          class="input input-range"
           type="range"
           max="20"
           min="-20"