fix: setup screen overflows viewport — constrain height and use 2-col grid

- Add max-height: 92vh and overflow-y: auto to .setup-card so it scrolls
  instead of extending past the screen
- Widen .setup-card to 860px to accommodate 2-column deck grid
- Change .deck-assignment-grid from vertical stack to 2-column grid so
  4 player panels fit in 2 rows instead of 4
- Reduce .deck-tab-content max-height to 170px and .deck-precon-list to
  140px for tighter panels
- Make gradient bar sticky so it stays visible when scrolling
- Add responsive fallback to single column below 640px
This commit is contained in:
Commander AI Lab committed 2026-04-03 13:36:27 +00:00
1 parent edcd6f4c52
commit 73f286b369
1 file changed
+16 -7
+16 -7
View File
@@ -341,18 +341,22 @@ input { font-family: inherit; }
border: 1px solid var(--color-border-strong); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xl); border-radius: var(--radius-xl);
padding: 2.5rem; padding: 2.5rem;
width: min(640px, 95vw); width: min(860px, 95vw);
max-height: 92vh;
overflow-y: auto;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
position: relative; position: relative;
overflow: hidden;
} }
.setup-card::before { .setup-card::before {
content: ''; content: '';
position: absolute; position: sticky;
top: 0; left: 0; right: 0; top: 0; left: 0; right: 0;
display: block;
height: 3px; height: 3px;
margin: -2.5rem -2.5rem 0 -2.5rem;
background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3), var(--p4)); background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3), var(--p4));
z-index: 1;
} }
.setup-title { .setup-title {
@@ -2971,10 +2975,15 @@ kbd {
DECK SELECTOR — 3-Category Tabs DECK SELECTOR — 3-Category Tabs
============================================================ */ ============================================================ */
.deck-assignment-grid { .deck-assignment-grid {
display: flex; display: grid;
flex-direction: column; grid-template-columns: 1fr 1fr;
gap: 8px; gap: 8px;
} }
@media (max-width: 640px) {
.deck-assignment-grid {
grid-template-columns: 1fr;
}
}
.deck-select-panel { .deck-select-panel {
background: rgba(255,255,255,0.03); background: rgba(255,255,255,0.03);
@@ -3049,7 +3058,7 @@ kbd {
} }
.deck-tab-content { .deck-tab-content {
max-height: 200px; max-height: 170px;
overflow-y: auto; overflow-y: auto;
} }
@@ -3074,7 +3083,7 @@ kbd {
} }
.deck-precon-list { .deck-precon-list {
max-height: 180px; max-height: 140px;
overflow-y: auto; overflow-y: auto;
} }