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

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

View File

@@ -725,9 +725,22 @@
}
@media (max-width: 640px) {
.github-import-modal {
width: calc(100vw - 16px);
max-height: 90vh;
/* Full-screen sheet on mobile — drop overlay padding so the modal
actually fills the viewport instead of being pushed below it. */
.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 {