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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user