fix(ui): respect iOS safe areas, screen height and landscape layout

This commit is contained in:
Gr33nbl00d
2026-10-19 19:43:53 +02:00
parent 88772b3278
commit b2613b2106
20 changed files with 243 additions and 95 deletions
+25 -19
View File
@@ -447,13 +447,11 @@
edges and let the inner body absorb the remaining height. */
body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .modal-content {
position: fixed !important;
inset: 0 !important;
left: 0 !important;
top: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100vh !important;
max-height: 100vh !important;
inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
border-radius: 0 !important;
transform: none !important;
display: flex !important;
@@ -472,17 +470,23 @@ body:not(.email-doc-split-active) .email-window-modal.email-window-fullscreen .e
one of the two CSS vars is 0 at any given time, set by init.js). */
body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
position: fixed !important;
top: 0 !important;
left: calc(var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
right: 0 !important;
bottom: 0 !important;
top: var(--safe-top) !important;
left: calc(var(--safe-left) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
right: var(--safe-right) !important;
bottom: var(--safe-bottom) !important;
width: auto !important;
max-width: none !important;
height: 100vh !important;
max-height: 100vh !important;
height: auto !important;
max-height: none !important;
border-radius: 0 !important;
transform: none !important;
}
@media (min-width: 769px) {
body.hamburger-right:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
left: var(--safe-left) !important;
right: calc(var(--safe-right) + var(--icon-rail-w, 48px) + var(--sidebar-w, 0px)) !important;
}
}
/* Mobile: the /email route adds .email-lib-fullscreen, but the desktop full-
bleed rule above squares off the corners and offsets the email by the icon
rail. On phones the email should be the normal bottom-sheet — full width,
@@ -490,12 +494,14 @@ body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.mod
so it wins on mobile. */
@media (max-width: 768px) {
body:not(.email-doc-split-active) #email-lib-modal.email-lib-fullscreen:not(.modal-right-docked) .modal-content {
left: 0 !important;
right: 0 !important;
width: 100vw !important;
max-width: 100vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
top: var(--sheet-top) !important;
left: var(--safe-left) !important;
right: var(--safe-right) !important;
bottom: 0 !important;
width: auto !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
border-radius: 14px 14px 0 0 !important;
border-top: 1px solid var(--border) !important;
}