You can now click on properties filling slots to view their details dialog

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

@@ -12,26 +12,31 @@
           {{ slot.totalFilled }} / {{ slot.quantityExpected }}
         </span>
       </h3>
-      <div
-        v-for="child in slot.children"
-        :key="child._id"
-        class="layout row"
-        :data-id="`slot-child-${child._id}`"
-      >
-        <tree-node-view
-          class="slotChild"
-          :model="child"
-        />
-        <v-spacer />
-        <v-btn
-          icon
-          flat
-          small
-          @click="remove(child)"
+      <v-list v-if="slot.children.length">
+        <v-list-tile
+          v-for="child in slot.children"
+          :key="child._id"
+          :data-id="`slot-child-${child._id}`"
+          @click="clickSlotChild(child)"
         >
-          <v-icon>delete</v-icon>
-        </v-btn>
-      </div>
+          <v-list-tile-content>
+            <tree-node-view
+              class="slotChild"
+              :model="child"
+            />
+          </v-list-tile-content>
+          <v-list-tile-action>
+            <v-btn
+              icon
+              flat
+              small
+              @click.stop="remove(child)"
+            >
+              <v-icon>delete</v-icon>
+            </v-btn>
+          </v-list-tile-action>
+        </v-list-tile>
+      </v-list>
       <v-btn
         v-if="!slot.quantityExpected || slot.quantityExpected > slot.totalFilled"
         icon
@@ -70,6 +75,13 @@ export default {
     },
   },
   methods: {
+    clickSlotChild({_id}){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `slot-child-${_id}`,
+				data: {_id},
+			});
+    },
     fillSlot(slot){
       let slotId = slot._id;
       let creatureId = this.creatureId;
@@ -139,7 +151,4 @@ export default {
 </script>
 
 <style lang="css" scoped>
-  div {
-    background-color: inherit;
-  }
 </style>