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:
1 parent
edcd6f4c52
commit
73f286b369
1 file changed
+16
-7
+16
-7
@@ -341,18 +341,22 @@ input { font-family: inherit; }
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-xl);
|
||||
padding: 2.5rem;
|
||||
width: min(640px, 95vw);
|
||||
width: min(860px, 95vw);
|
||||
max-height: 92vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.setup-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
position: sticky;
|
||||
top: 0; left: 0; right: 0;
|
||||
display: block;
|
||||
height: 3px;
|
||||
margin: -2.5rem -2.5rem 0 -2.5rem;
|
||||
background: linear-gradient(90deg, var(--p1), var(--p2), var(--p3), var(--p4));
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.setup-title {
|
||||
@@ -2971,10 +2975,15 @@ kbd {
|
||||
DECK SELECTOR — 3-Category Tabs
|
||||
============================================================ */
|
||||
.deck-assignment-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.deck-assignment-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.deck-select-panel {
|
||||
background: rgba(255,255,255,0.03);
|
||||
@@ -3049,7 +3058,7 @@ kbd {
|
||||
}
|
||||
|
||||
.deck-tab-content {
|
||||
max-height: 200px;
|
||||
max-height: 170px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -3074,7 +3083,7 @@ kbd {
|
||||
}
|
||||
|
||||
.deck-precon-list {
|
||||
max-height: 180px;
|
||||
max-height: 140px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user