pop36

public/css/building.css

@@ -381,14 +381,29 @@ body {
   display: grid;
 
   grid-template-columns: repeat(8, 70px);
-  grid-template-rows: repeat(4, 70px);
+  grid-auto-rows: 70px;
 
   gap: 8px;
 
-  max-height: 320px;
-  overflow-y: auto;
+  width: max-content;
+
+  margin: 0 auto;
 
   padding: 10px;
+
+  max-height: 320px;
+
+  overflow-y: auto;
+}
+
+#inventory-wrapper {
+  width: 620px;
+
+  margin: 0 auto;
+
+  max-height: 320px;
+
+  overflow-y: auto;
 }
 
 .inventory-slot {

public/js/buildings/wohnhaus.js

@@ -53,7 +53,9 @@ export async function loadWohnhaus() {
 
 <h3>Inventar</h3>
 
+<div id="inventory-wrapper">
 <div id="inventory-grid"></div>
+</div>
 
 `;
 
@@ -107,7 +109,8 @@ async function loadInventory() {
 
   /* feste 32 slots erzeugen */
 
-  for (let i = 0; i < 32; i++) {
+  const totalSlots = Math.max(32, items.length);
+  for (let i = 0; i < totalSlots; i++) {
     const item = items[i];
 
     if (item) {