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:
gsxdsm
2026-04-27 18:10:24 -07:00
parent 1fe59be960
commit 3b3d456ca8
8 changed files with 147 additions and 24 deletions

View File

@@ -742,6 +742,28 @@
.detail-move-split-btn__chevron {
min-width: calc(var(--space-md) + var(--space-sm));
}
/* Full-screen sheet on mobile. Desktop `min-width: 480px` would otherwise
push the modal off narrow viewports; overlay padding-top leaves awkward
gaps. Resize is disabled (touchscreens can't drag the grip). */
.modal-overlay:has(.task-detail-modal) {
padding-top: 0;
align-items: stretch;
justify-content: stretch;
}
.modal.task-detail-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;
}
}
.detail-actions-menu-item-danger {