Changed slot cards to column layout

app/imports/ui/components/ColumnLayout.vue

@@ -18,7 +18,7 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
 	.column-layout {
 		column-count: 12;
 		column-fill: balance;
@@ -35,7 +35,7 @@ export default {
 		transform: translateZ(0);
 		padding: 4px;
 	}
-	.column-layout >>> > div {
+	.column-layout > div, .column-layout > span > div {
     /*
       Table and width set because firefox does not support break-inside: avoid
     */

app/imports/ui/creature/character/characterSheetTabs/BuildTab.vue

@@ -9,9 +9,7 @@
       </v-col>
     </v-row>
     <v-row dense>
-      <v-col cols="12">
-        <slot-cards-to-fill :creature-id="creatureId" />
-      </v-col>
+      <slot-cards-to-fill :creature-id="creatureId" />
     </v-row>
     <v-row dense>
       <v-col

app/imports/ui/creature/slots/SlotCard.vue

@@ -6,7 +6,6 @@
     :style="`border: solid 1px ${accentColor};`"
     hover
     class="slot-card d-flex flex-column"
-    style="max-width: 400px;"
     @mouseover="hover = true"
     @mouseleave="hover = false"
     @click="$emit('click')"
@@ -17,7 +16,7 @@
     <v-card-title>
       {{ model.name }}
     </v-card-title>
-    <v-card-text>
+    <v-card-text v-if="model.description">
       <property-description
         text
         :model="model.description"

app/imports/ui/creature/slots/SlotCardsToFill.vue

@@ -1,26 +1,30 @@
 <template>
-  <div class="slots-to-fill">
-    <v-slide-y-transition
+  <column-layout wide-columns class="slots-to-fill">
+    <v-fade-transition
       group
       leave-absolute
+      hide-on-leave
     >
-      <slot-card
+      <div
         v-for="slot in slots"
         :key="slot._id"
-        :model="slot"
-        class="ma-1"
-        hover
-        style="display: inline-block !important; transition: all 0.3s !important;"
-        @ignore="ignoreSlot(slot._id)"
-        @click="fillSlot(slot._id)"
-      />
-    </v-slide-y-transition>
-  </div>
+        style="transition: all 0.3s !important"
+      >
+        <slot-card
+          :model="slot"
+          hover
+          @ignore="ignoreSlot(slot._id)"
+          @click="fillSlot(slot._id)"
+        />
+      </div>
+    </v-fade-transition>
+  </column-layout>
 </template>
 
 <script lang="js">
 import CreatureProperties from '/imports/api/creature/creatureProperties/CreatureProperties.js';
 import SlotCard from '/imports/ui/creature/slots/SlotCard.vue';
+import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 import updateCreatureProperty from '/imports/api/creature/creatureProperties/methods/updateCreatureProperty.js';
 import insertPropertyFromLibraryNode from '/imports/api/creature/creatureProperties/methods/insertPropertyFromLibraryNode.js';
 import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
@@ -28,6 +32,7 @@ import { snackbar } from '/imports/ui/components/snackbars/SnackbarQueue.js';
 export default {
   components: {
     SlotCard,
+    ColumnLayout,
   },
   inject: {
     context: { default: {} }