experimental css changes

components/CardSlot.vue

@@ -9,20 +9,19 @@ const props = withDefaults(defineProps<Props>(), {
     stack: () => [],
 })
 
-const wrapped = ref(false)
+const unwrapped = ref(false)
 
 </script>
 
 <template>
     {{ props.stack?.length }}
-    <input type="checkbox" v-model="wrapped" />
+    <input type="checkbox" v-model="unwrapped" />
     <div class="cards_container">
-
-        <CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
+        <CardPreview v-if="!unwrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
             <slot></slot>
         </CardPreview>
 
-        <template v-if="wrapped" v-for="c in props.stack">
+        <template v-if="unwrapped" v-for="c in props.stack">
             <CardPreview :data="c">
                 <slot></slot>
             </CardPreview>
@@ -31,11 +30,4 @@ const wrapped = ref(false)
 
 
 
-</template>
-
-<style scoped>
-.cards_container {
-    display: flex;
-    flex-direction: row;
-}
-</style>
+</template>