From a038da669c0ec855502631f0c1e4aa08d76c4310 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Sun, 31 May 2026 20:13:28 +0200 Subject: [PATCH] fix: avoid extra mobile browser bottom inset --- .changeset/fix-mobile-browser-height.md | 5 +++++ src/client/src/components/PiWebApp.ts | 4 ++++ src/client/src/components/shared.ts | 7 ++++++- 3 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 .changeset/fix-mobile-browser-height.md diff --git a/.changeset/fix-mobile-browser-height.md b/.changeset/fix-mobile-browser-height.md new file mode 100644 index 0000000..455ad9a --- /dev/null +++ b/.changeset/fix-mobile-browser-height.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Fix mobile browser layout so the app no longer leaves an extra bottom gap above browser controls while preserving standalone PWA safe-area spacing. diff --git a/src/client/src/components/PiWebApp.ts b/src/client/src/components/PiWebApp.ts index f456464..2eb64d0 100644 --- a/src/client/src/components/PiWebApp.ts +++ b/src/client/src/components/PiWebApp.ts @@ -151,6 +151,10 @@ export class PiWebApp extends LitElement { } }; + protected override willUpdate(): void { + this.toggleAttribute("pwa-display-mode", this.appShell.isPwaDisplayMode); + } + override connectedCallback(): void { super.connectedCallback(); window.addEventListener("popstate", this.onPopState); diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts index b3fc6cb..01e86d7 100644 --- a/src/client/src/components/shared.ts +++ b/src/client/src/components/shared.ts @@ -50,7 +50,12 @@ export interface CompletionItem { } export const appStyles = css` - :host { position: fixed; top: 0; right: 0; left: 0; display: block; height: 100dvh; box-sizing: border-box; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: var(--pi-text); background: var(--pi-bg); font: 14px system-ui, sans-serif; } + /* Mobile browsers already subtract browser controls from 100dvh; reserve bottom safe area only in standalone PWA modes. */ + :host { --pi-app-safe-area-bottom: 0px; position: fixed; top: 0; right: 0; left: 0; display: block; height: 100dvh; box-sizing: border-box; overflow: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) var(--pi-app-safe-area-bottom) env(safe-area-inset-left); color: var(--pi-text); background: var(--pi-bg); font: 14px system-ui, sans-serif; } + :host([pwa-display-mode]) { --pi-app-safe-area-bottom: env(safe-area-inset-bottom); } + @media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { + :host { --pi-app-safe-area-bottom: env(safe-area-inset-bottom); } + } .shell { --navigation-panel-width: 340px; --workspace-panel-width: minmax(360px, 42vw); display: grid; grid-template-columns: var(--navigation-panel-width) 1px minmax(420px, 1fr) 1px var(--workspace-panel-width); height: 100%; min-height: 0; } aside { grid-column: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } aside app-navigation-panel { flex: 1 1 auto; min-height: 0; }