diff --git a/styles.css b/styles.css index 3abd51c..57d7567 100644 --- a/styles.css +++ b/styles.css @@ -1861,6 +1861,13 @@ textarea:focus { /* Keep phase pages inside the visible mobile viewport, including safe areas. */ .phase-body { padding: 0; + --phase-top-offset: var(--safe-top); +} + +@media (display-mode: standalone), (display-mode: fullscreen) { + .phase-body { + --phase-top-offset: max(var(--safe-top), 1.15rem); + } } .phase-body .phase-shell { @@ -1870,7 +1877,7 @@ textarea:focus { height: 100dvh; max-height: 100dvh; padding: - calc(var(--safe-top) + 0.8rem) + calc(var(--phase-top-offset) + 0.8rem) calc(var(--safe-right) + 0.6rem) calc(var(--safe-bottom) + 0.9rem) calc(var(--safe-left) + 0.6rem); @@ -1881,7 +1888,7 @@ textarea:focus { .phase-body .phase-shell { width: 100%; padding: - calc(var(--safe-top) + 0.55rem) + calc(var(--phase-top-offset) + 0.55rem) calc(var(--safe-right) + 0.5rem) calc(var(--safe-bottom) + 0.55rem) calc(var(--safe-left) + 0.5rem); @@ -1892,7 +1899,7 @@ textarea:focus { .phase-body .phase-shell { gap: 0.2rem; padding: - calc(var(--safe-top) + 0.2rem) + calc(var(--phase-top-offset) + 0.2rem) calc(var(--safe-right) + 0.35rem) calc(var(--safe-bottom) + 0.2rem) calc(var(--safe-left) + 0.35rem); @@ -1981,3 +1988,36 @@ textarea:focus { font-size: 0.72rem; } } + +@media (max-width: 420px) { + body[data-page="chrono"] .phase-header { + grid-template-columns: auto auto; + grid-template-areas: + "brand action" + "title title"; + align-items: center; + row-gap: 0.28rem; + } + + body[data-page="chrono"] .brand-link-logo { + grid-area: brand; + justify-self: start; + } + + body[data-page="chrono"] .utility-button { + grid-area: action; + justify-self: end; + } + + body[data-page="chrono"] .phase-title { + grid-area: title; + min-width: 0; + text-align: center; + } + + body[data-page="chrono"] .phase-title h1 { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +}