made shadow control usable on mobile

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;
+  &.-compact {
-  grid-template-areas:
+    max-width: none;
-    "label checkbox"
+  }
-    "input input";
 
   .label {
     flex: 1 1 auto;

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'],

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>

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;
   }

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)"