css

Blazor/Blazor/Components/Inventory.razor

@@ -1,7 +1,8 @@
 @using Models;
 
-<h3>Inventory</h3>
 <CascadingValue Value="@this">
+    <div id="master">
+        <div class="inventory">
             <div class="css-grid">
                 @for(int i = 0; i<Models.InventoryList.size;i++)
                 {
@@ -15,12 +16,18 @@
                     }
                 }
             </div>
-    <div class="col-12">
+
+
             <div>Actions</div>
                 <div class="actions" id="actions">
             </div>
+
         </div>
 
+        <div class="inventory-list">
             <InventoryList/>
+        </div>
+    </div>
+
 </CascadingValue>
 

Blazor/Blazor/Components/Inventory.razor.css

@@ -1,8 +1,22 @@
-.css-grid {
+.inventory-list {
-    grid-template-columns: repeat(6,minmax(0,1fr));
+    width: 40%;
+}
+
+.inventory {
+    width: 40%;
+}
+
+.css-grid {
+    grid-template-columns: repeat(6, minmax(0,1fr));
     gap: 10px;
     display: grid;
-    width: 40%;
+}
+
+#master {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .actions {

Blazor/Blazor/Components/InventoryList.razor

@@ -1,5 +1,4 @@
 @using Blazor.Models
-<h3>Inventory Item List</h3>
 
 <DataGrid TItem="Item"
           Data="@items"

Blazor/Blazor/Pages/InventoryPage.razor

@@ -1,19 +1,8 @@
 @page "/inventory"
 @using Blazor.Components
 
-<PageTitle>Counter</PageTitle>
+<PageTitle>Inventory</PageTitle>
 
 <h1>Inventory</h1>
 
-<div id="master">
+<Inventory/>
-    <div class="inventory">
-        <span>
-            <Inventory/>
-        </span>
-    </div>
-
-
-    <div class="inventory-list">
-        <InventoryList/>
-    </div>
-</div>