AI: Loadout page scroll + icon-only layout — ZeroSpace/ZeroSpace.Web/Pages/Loadout.razor.css

ZeroSpace/ZeroSpace.Web/Pages/Loadout.razor.css

@@ -11,6 +11,21 @@
     }
 }
 
+/* The item pool scrolls independently so the loadout board stays on screen. */
+.loadout-pool {
+    max-height: calc(100vh - 10rem);
+    max-height: calc(100dvh - 10rem);
+    overflow-y: auto;
+    padding-right: 0.5rem;
+}
+
+@media (max-width: 900px) {
+    .loadout-pool {
+        max-height: none;
+        overflow-y: visible;
+    }
+}
+
 .hero-label {
     font-weight: 600;
     color: #94a3b8;
@@ -48,6 +63,22 @@
     gap: 0.5rem;
 }
 
+/* Icon-only mode: icons wrap in a compact flex grid and shrink a little. */
+.pool-list.compact {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.pool-list.compact .pool-card {
+    padding: 0.3rem;
+}
+
+.pool-list.compact .pool-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1.2rem;
+}
+
 .pool-card {
     display: flex;
     gap: 0.75rem;