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 */
@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;
height: 100dvh;
max-width: 100%;
max-width: 100vw;
max-height: 100dvh;
margin: 0;
border: none;
border-radius: 0;
}