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

2026-10-03 03:38:36 +00:00
parent a0fa28f753
commit d00e41571f
1 changed files with 31 additions and 0 deletions
@@ -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;