root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): make File Browser, Git Manager, GitHub Import modals proper full-screen sheets on mobile

Browse Source 
All three were declared as 100vw/100dvh on mobile but the .modal-overlay
default still applied 10vh top padding, leaving them pushed below the
viewport edge with a sliver of overlay showing on top. Override
.modal-overlay:has(.X) to drop padding and stretch to fill, and explicitly
zero out border/radius/margin on the modal itself so the sheet truly
covers the screen.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-04-25 10:56:41 -07:00
parent 6f45b649f2
commit 79ea99fb7a
3 changed files with 44 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
packages/dashboard/app/components/FileBrowser.css
View File

@@ -875,11 +875,22 @@
/* Mobile responsive */ /* Mobile responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
.file-browser-modal { /* On mobile the file browser is presented as a full-screen sheet — drop
the overlay's default top padding so the modal actually fills the
viewport instead of being pushed below it. */
.modal-overlay:has(.file-browser-modal) {
padding-top: 0;
align-items: stretch;
justify-content: stretch;
}
.modal.file-browser-modal {
width: 100vw; width: 100vw;
height: 100dvh; height: 100dvh;
max-width: 100%; max-width: 100vw;
max-height: 100dvh; max-height: 100dvh;
margin: 0;
border: none;
border-radius: 0; border-radius: 0;
} }

19
packages/dashboard/app/components/GitHubImportModal.css
View File

@@ -725,9 +725,22 @@
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.github-import-modal { /* Full-screen sheet on mobile — drop overlay padding so the modal
width: calc(100vw - 16px); actually fills the viewport instead of being pushed below it. */
max-height: 90vh; .modal-overlay:has(.github-import-modal) {
padding-top: 0;
align-items: stretch;
justify-content: stretch;
}
.modal.github-import-modal {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border: none;
border-radius: 0;
} }
.github-import-modal__body { .github-import-modal__body {

20
packages/dashboard/app/components/ScriptsModal.css
View File

@@ -3141,11 +3141,21 @@
/* ── Responsive ── */ /* ── Responsive ── */
@media (max-width: 640px) { @media (max-width: 640px) {
.gm-modal { /* Full-screen sheet on mobile — drop overlay padding so the modal
width: 100%; actually fills the viewport instead of being pushed below it. */
max-width: 100%; .modal-overlay:has(.gm-modal) {
height: 100vh; padding-top: 0;
max-height: 100vh; align-items: stretch;
justify-content: stretch;
}
.modal.gm-modal {
width: 100vw;
max-width: 100vw;
height: 100dvh;
max-height: 100dvh;
margin: 0;
border: none;
border-radius: 0; border-radius: 0;
} }