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: 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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in new issue
Block a user