diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 250bf8c1..9c85cc0b 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -88,7 +88,7 @@
 
   .component-editor {
     display: grid;
-    grid-template-columns: 4fr 3fr 5fr;
+    grid-template-columns: 6fr 3fr 4fr;
     grid-template-rows: auto auto 1fr;
     grid-gap: 0.5em;
     grid-template-areas:
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 45f56f95..bc26a031 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -121,10 +121,12 @@
         <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
         <ComponentPreview
           class="component-preview"
-          showText="componentHas('Text')"
-          :shadowControl="isShadowTabOpen && editedShadow"
+          :showText="componentHas('Text')"
+          :shadowControl="isShadowTabOpen"
+          :shadow="editedShadow"
           :previewClass="previewClass"
           :previewStyle="editorHintStyle"
+          :disabled="!isShadowPresent"
           @update:shadow="({ axis, value }) => updateProperty(axis, value)"
         />
       </div>
@@ -229,7 +231,7 @@
           </checkbox>
           <ShadowControl
             v-model="editedShadow"
-            :disabled="isShadowPresent"
+            :disabled="!isShadowPresent"
             :no-preview="true"
             :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
           />