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:
@@ -408,15 +408,25 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.workflow-step-manager-modal {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
/* Full-screen sheet on mobile — drop the overlay's top padding so the
|
||||
modal fills the viewport instead of being pushed below it. */
|
||||
.modal-overlay:has(.workflow-step-manager-modal) {
|
||||
padding-top: 0;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.modal.workflow-step-manager-modal {
|
||||
width: 100vw;
|
||||
min-width: 0;
|
||||
max-width: 100vw;
|
||||
height: 100dvh;
|
||||
max-height: 100vh;
|
||||
min-height: 0;
|
||||
max-height: 100dvh;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.wfm-body {
|
||||
|
||||
Reference in New Issue
Block a user