From 97c058ebdaeefbffb11461d8ed9a3a1627548d11 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 7 Oct 2024 01:30:53 +0300
Subject: [PATCH] neater looks for shadow-related things

---
 .../tabs/style_tab/style_tab.vue              |  4 ++-
 .../shadow_control/shadow_control.js          |  7 +++-
 .../shadow_control/shadow_control.scss        | 36 +++++++++++++++----
 .../shadow_control/shadow_control.vue         |  6 ++--
 4 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 9b5a4f9e..66a41bf1 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -250,6 +250,7 @@
               v-model="editedShadow"
               :disabled="!isShadowPresent"
               :no-preview="true"
+              :compact="true"
               :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
               @subShadowSelected="onSubShadow"
             />
@@ -272,7 +273,7 @@
             id="palette-selector"
             v-model="selectedPaletteId"
             class="list-select"
-            size="10"
+            size="4"
           >
             <option
               v-for="(p, index) in palettes"
@@ -358,6 +359,7 @@
           <ShadowControl
             v-if="selectedVirtualDirective.valType === 'shadow'"
             v-model="selectedVirtualDirectiveParsed"
+            :compact="true"
           />
           </div>
       </div>
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index 3fe1aa29..8eab5c91 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -41,7 +41,12 @@ const toModel = (input) => {
 
 export default {
   props: [
-    'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
+    'modelValue',
+    'fallback',
+    'separateInset',
+    'noPreview',
+    'disabled',
+    'compact'
   ],
   emits: ['update:modelValue', 'subShadowSelected'],
   data () {
diff --git a/src/components/shadow_control/shadow_control.scss b/src/components/shadow_control/shadow_control.scss
index de4159c1..b0cf7014 100644
--- a/src/components/shadow_control/shadow_control.scss
+++ b/src/components/shadow_control/shadow_control.scss
@@ -1,12 +1,32 @@
-.settings-modal .settings-modal-panel .shadow-control {
-  display: flex;
-  flex-wrap: wrap;
+.ShadowControl {
+  display: grid;
+  grid-template-columns: 10em 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "selector preview tweak";
+  grid-gap: 0.5em;
   justify-content: stretch;
-  grid-gap: 0.25em;
   margin-bottom: 1em;
   width: 100%;
 
+  &.-compact {
+    grid-template-columns: 1fr;
+    grid-template-rows: 10em auto auto;
+    grid-template-areas:
+      "selector"
+      "preview"
+      "tweak";
+
+    &.-no-preview {
+      grid-template-columns: 1fr;
+      grid-template-rows: 10em 1fr;
+      grid-template-areas:
+        "selector"
+        "tweak";
+    }
+  }
+
   .shadow-switcher {
+    grid-area: selector;
     order: 1;
     flex: 1 0 6em;
     min-width: 6em;
@@ -20,6 +40,7 @@
   }
 
   .shadow-tweak {
+    grid-area: tweak;
     order: 3;
     flex: 2 0 10em;
     min-width: 10em;
@@ -65,6 +86,10 @@
   }
 
   &.-no-preview {
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "selector tweak";
+
     .shadow-tweak {
       order: 0;
       flex: 2 0 8em;
@@ -87,8 +112,7 @@
   }
 
   .shadow-preview {
-    order: 2;
-    flex: 3 3 15em;
+    grid-area: preview;
     min-width: 10em;
     margin-left: 0.125em;
     align-self: start;
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 29adfff4..4f0906c7 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -1,7 +1,7 @@
 <template>
   <div
-    class="label shadow-control"
-    :class="{ disabled: disabled || !present, '-no-preview': noPreview }"
+    class="ShadowControl label shadow-control"
+    :class="{ disabled: disabled || !present, '-no-preview': noPreview, '-compact': compact }"
   >
     <ComponentPreview
       v-if="!noPreview"
@@ -16,7 +16,7 @@
         id="shadow-list"
         v-model="selectedId"
         class="shadow-list"
-        size="10"
+        size="4"
         :disabled="disabled || shadowsAreNull"
       >
         <option