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