subshadow select event + better styles for preview

src/components/component_preview/component_preview.vue

@@ -166,12 +166,19 @@
     }
 
     .preview-block {
-      width: 33%;
-      height: 33%;
-      border-radius: var(--roundness);
       background: var(--background);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 33%;
+      min-height: 33%;
+      max-width: 80%;
+      max-height: 80%;
+      border-width: 0;
+      border-style: solid;
+      border-color: var(--border);
+      border-radius: var(--roundness);
       box-shadow: var(--shadow);
-      border: 1px solid var(--border);
     }
   }
 }

src/components/shadow_control/shadow_control.js

@@ -36,7 +36,7 @@ export default {
   props: [
     'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
   ],
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'subShadowSelected'],
   data () {
     return {
       selectedId: 0,
@@ -93,9 +93,13 @@ export default {
       }
     }
   },
+  watch: {
+    selected (value) {
+      this.$emit('subShadowSelected', this.selectedId)
+    }
+  },
   methods: {
     updateProperty: throttle(function (prop, value) {
-      console.log(prop, value)
       this.cValue[this.selectedId][prop] = value
       if (prop === 'inset' && value === false && this.separateInset) {
         this.cValue[this.selectedId].spread = 0