fix(maestro): full-screen spawn dialog on mobile
The dialog capped at 92vh and scrolled its whole body, so the Spawn button sat below the fold on a phone. Below 600px it now fills the viewport, the pickers drop their own scroll caps, and the actions row sticks to the bottom edge.
This commit is contained in:
@@ -2023,6 +2023,51 @@ input.leaf-rename:focus {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
/* Mobile: the spawn form is the tallest dialog we have, so it takes the whole
|
||||
screen and lays out as one flex column — header, scrolling body, actions
|
||||
pinned to the bottom edge. Below the fold is where the Submit button used to
|
||||
hide. */
|
||||
@media (max-width: 599px) {
|
||||
.modal.spawn-modal {
|
||||
height: 100dvh;
|
||||
max-height: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.spawn-modal .spawn-form {
|
||||
flex: 1 1 auto;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* One scroll box, not four: the pickers' own caps stack scrollable regions
|
||||
inside a screen that is already short. Let them grow and let the form
|
||||
scroll. */
|
||||
.spawn-modal .picker,
|
||||
.spawn-modal .picker.projects,
|
||||
.spawn-modal .picker.wt-choices {
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
/* Rides the bottom of the scroll box: reachable at any scroll position, and
|
||||
`margin-top: auto` keeps it at the screen's foot when the form is short. */
|
||||
.spawn-modal .form-actions {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
margin-top: auto;
|
||||
padding: var(--sp-2) 0 calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--surface);
|
||||
box-shadow: 0 -8px 12px -8px oklch(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
.spawn-modal .form-actions .btn {
|
||||
flex: 1 1 0;
|
||||
justify-content: center;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- forms ---------- */
|
||||
|
||||
.spawn-form {
|
||||
|
||||
Reference in New Issue
Block a user