diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index c6680b6b0..fad2bfca7 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -2,11 +2,10 @@
   display: inline-flex;
   flex-wrap: wrap;
   max-width: 10em;
-  grid-template-columns: 1fr auto;
-  grid-template-rows: auto auto;
-  grid-template-areas:
-    "label checkbox"
-    "input input";
+
+  &.-compact {
+    max-width: none;
+  }
 
   .label {
     flex: 1 1 auto;
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index 266ad4d4e..58aee575c 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="color-input style-control"
-    :class="{ disabled: !present || disabled }"
+    :class="{ disabled: !present || disabled, '-compact': compact }"
   >
     <label
       :for="name"
@@ -127,6 +127,10 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    compact: {
+      required: false,
+      type: Boolean
     }
   },
   emits: ['update:modelValue'],
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue
index 0d81128c7..0a0f9541e 100644
--- a/src/components/component_preview/component_preview.vue
+++ b/src/components/component_preview/component_preview.vue
@@ -104,6 +104,7 @@
         v-model="colorOverride"
         class="input-color-input"
         fallback="#606060"
+        :compact="true"
         :label="$t('settings.style.shadows.color_override')"
       />
     </div>
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index d169ea234..42edd1b8f 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -110,7 +110,6 @@
 
   .shadow-preview {
     grid-area: preview;
-    min-width: 25em;
     margin-left: 0.125em;
     place-self: start center;
   }
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index f34741797..4fdae4207 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -168,6 +168,7 @@
           :disabled="disabled || !present"
           :label="$t('settings.style.common.color')"
           :fallback="getColorFallback"
+          :compact="true"
           :show-optional-checkbox="false"
           name="shadow"
           @update:model-value="e => updateProperty('color', e)"