mirror of
https://github.com/pewdiepie-archdaemon/odysseus.git
synced 2026-10-20 13:52:24 +02:00
fix(ui): respect iOS safe areas, screen height and landscape layout
This commit is contained in:
+25
-19
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user