diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index a374184b..dd049023 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 af24f15a..e1d20191 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"