diff --git a/src/client/index.html b/src/client/index.html
index 58b6f29..0692e88 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -2,10 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Pi Web POC</title>
     <style>
       html, body { margin: 0; height: 100%; overflow: hidden; }
+      body { min-height: 100dvh; }
     </style>
   </head>
   <body>
diff --git a/src/client/src/components/shared.ts b/src/client/src/components/shared.ts
index 9514ded..c7d47ea 100644
--- a/src/client/src/components/shared.ts
+++ b/src/client/src/components/shared.ts
@@ -24,7 +24,7 @@ export interface CompletionItem {
 }
 
 export const appStyles = css`
-  :host { display: block; height: 100vh; color: #e6edf3; background: #0d1117; font: 14px system-ui, sans-serif; }
+  :host { display: block; height: 100dvh; box-sizing: border-box; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); color: #e6edf3; background: #0d1117; font: 14px system-ui, sans-serif; }
   .shell { display: grid; grid-template-columns: 340px 1fr; height: 100%; min-height: 0; }
   aside { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid #30363d; overflow: hidden; }
   header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #30363d; }
