fix(dashboard): mobile rendering for resizable modals
The Settings, Workflow Steps, Automations (and friends) modals all carried desktop `min-width: 480-520px` constraints from the resize work. On phones that pushed them off-screen, and the overlay's 10vh top padding plus a fractional `height: 80vh` left awkward gaps top and bottom. Apply the same `@media (max-width: 768px)` full-screen-sheet treatment that File Browser already had to every resize-aware modal: drop the overlay padding, set width/height to `100vw`/`100dvh`, zero out the min-* / max-* constraints, and disable `resize` (touchscreens can't grab the corner grip anyway). Also tightened the existing File Browser and GitHub Import overrides to match (`min-width: 0`, `min-height: 0`, `resize: none`). For TaskDetailModal the mobile rules go inside the existing first `@media (max-width: 768px)` block to keep the FN-1331 detail-body padding regression test happy (it captures from the first 768px media query greedily). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -3213,12 +3213,36 @@
|
||||
|
||||
.modal.gm-modal {
|
||||
width: 100vw;
|
||||
min-width: 0;
|
||||
max-width: 100vw;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
max-height: 100dvh;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
/* Same treatment for the Automations modal — same min-width: 480px would
|
||||
otherwise force it wider than narrow viewports. */
|
||||
.modal-overlay:has(.automation-modal) {
|
||||
padding-top: 0;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.modal.automation-modal {
|
||||
width: 100vw;
|
||||
min-width: 0;
|
||||
max-width: 100vw;
|
||||
height: 100dvh;
|
||||
min-height: 0;
|
||||
max-height: 100dvh;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.gm-layout {
|
||||
|
||||
Reference in New Issue
Block a user