snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: avoid extra mobile browser bottom inset

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-05-31 20:13:28 +02:00
parent fdd2cf2390
commit a038da669c
3 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/fix-mobile-browser-height.md
+5
View File
@@ -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.
src/client/src/components/PiWebApp.ts
+4
View File
@@ -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);
src/client/src/components/shared.ts
+6 -1
View File
@@ -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; }