From a1fcabf01e74c9ff07cbd8057c2e8a50d9605d4d Mon Sep 17 00:00:00 2001 From: Jason Zimdars Date: Mon, 24 Nov 2025 16:33:32 -0600 Subject: [PATCH] Add env constaints for mobile layout In theory, this prevents overlapping device elements like the dynamic island in landscape --- app/assets/stylesheets/bar.css | 4 +++- app/assets/stylesheets/layout.css | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/bar.css b/app/assets/stylesheets/bar.css index 1aa2494de..077412a4d 100644 --- a/app/assets/stylesheets/bar.css +++ b/app/assets/stylesheets/bar.css @@ -11,7 +11,9 @@ inset: auto 0 0 0; max-block-size: 100%; padding-block: var(--block-space) calc(var(--block-space) + env(safe-area-inset-bottom)); - padding-inline: calc(var(--tray-size) + calc(var(--inline-space) * 3)); + padding-inline: + calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-left)) + calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-right)); place-content: center; position: fixed; view-transition-name: bar; diff --git a/app/assets/stylesheets/layout.css b/app/assets/stylesheets/layout.css index f4157a270..e82992dfc 100644 --- a/app/assets/stylesheets/layout.css +++ b/app/assets/stylesheets/layout.css @@ -12,7 +12,9 @@ inline-size: 100dvw; margin-inline: auto; max-inline-size: 100dvw; - padding-inline: var(--main-padding); + padding-inline: + calc(var(--main-padding) + env(safe-area-inset-left)) + calc(var(--main-padding) + env(safe-area-inset-right)); text-align: center; }