💄 Fix style to allow dropping in the whole box

blazor_lab/Components/InventoryItem.razor

@@ -4,7 +4,7 @@
      @ondrop="@OnDrop">
     @if (Item is not null && IsInList)
     {
-        <div class="inventory-list-item side-by-side">
+        <div class="inventory-list-item">
             <img src="@($"data:image/png;base64,{Item.ImageBase64}")" alt="@Item.DisplayName" />
             <div class="item-name">@Item.DisplayName</div>
         </div>
@@ -17,8 +17,8 @@
                 <div class="slot-image">
                     <img src="@($"data:image/png;base64,{InventoryModel.ImageBase64}")" alt="@InventoryModel.ItemName" />
                 </div>
-            }
                 <div class="slot-count">@InventoryModel.NumberItem</div>
+            }
         </div>
     }
 </div>

blazor_lab/Components/InventoryItem.razor.css

@@ -1,4 +1,6 @@
 .inventory-list-item {
+    display: flex;
+    flex-direction: row;
     margin-bottom: 10px;
     padding: 10px;
     border: 1px solid #ddd;
@@ -12,20 +14,26 @@
         margin-right: 10px;
     }
 
-.slot-image {
+.inventory-grid-item {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid #ddd;
+    height: 64px;
+    width: 64px;
+}
+
+    .inventory-grid-item .slot-image {
         font-weight: bold;
         font-size: small;
     }
 
-.slot-count {
+    .inventory-grid-item .slot-count {
         font-size: small;
     }
 
-.item-name {
+    .inventory-grid-item .item-name {
         font-weight: bold;
     }
-
-.side-by-side {
-    display: flex;
-    flex-direction: row;
-}