Add fullscreen PWA support

web/src/App.tsx

@@ -2617,7 +2617,7 @@ export default function App() {
   }
 
   return (
-    <div className="app-grid-surface h-full p-0 md:p-2">
+    <div className="app-grid-surface app-safe-frame h-full">
       <div className="flex h-full w-full overflow-hidden bg-transparent md:gap-2">
         {isMobileSidebarOpen ? (
           <button

web/src/components/auth/auth-screen.tsx

@@ -12,7 +12,7 @@ type Props = {
 
 export function AuthScreen({ authTokenInput, setAuthTokenInput, isSigningIn, authError, onSignIn }: Props) {
   return (
-    <div className="app-grid-surface flex h-full items-center justify-center p-4">
+    <div className="app-grid-surface app-safe-pad flex h-full items-center justify-center">
       <div className="glass-panel w-full max-w-md rounded-2xl border border-violet-300/18 p-6">
         <div className="mb-6">
           <div className="sybil-wordmark bg-[linear-gradient(90deg,#ff8df8,#9a6dff_54%,#67dfff)] bg-clip-text text-3xl text-transparent">

web/src/index.css

@@ -14,6 +14,10 @@
 
 :root {
   color-scheme: dark;
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-right: env(safe-area-inset-right, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-area-left: env(safe-area-inset-left, 0px);
   --background: 235 45% 4%;
   --foreground: 258 36% 96%;
   --muted: 246 30% 13%;
@@ -40,6 +44,15 @@ html,
 body,
 #app {
   height: 100%;
+  width: 100%;
+}
+
+@supports (height: 100dvh) {
+  html,
+  body,
+  #app {
+    height: 100dvh;
+  }
 }
 
 body {
@@ -49,6 +62,8 @@ body {
     linear-gradient(90deg, hsl(187 92% 49% / 0.08), transparent 24%, hsl(264 92% 59% / 0.12) 74%, transparent),
     linear-gradient(180deg, hsl(250 60% 16% / 0.68), hsl(235 45% 4%) 48%, hsl(235 54% 3%));
   font-family: "Inter", "Avenir Next", "Segoe UI", sans-serif;
+  overflow: hidden;
+  overscroll-behavior: none;
 }
 
 button,
@@ -78,6 +93,44 @@ textarea {
   background-size: 48px 48px;
 }
 
+.app-safe-frame {
+  padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
+}
+
+.app-safe-pad {
+  padding:
+    max(1rem, var(--safe-area-top))
+    max(1rem, var(--safe-area-right))
+    max(1rem, var(--safe-area-bottom))
+    max(1rem, var(--safe-area-left));
+}
+
+.app-search-safe-pad {
+  padding:
+    max(1.5rem, var(--safe-area-top))
+    max(0.75rem, var(--safe-area-right))
+    max(1.5rem, var(--safe-area-bottom))
+    max(0.75rem, var(--safe-area-left));
+}
+
+@media (min-width: 768px) {
+  .app-safe-frame {
+    padding:
+      max(0.5rem, var(--safe-area-top))
+      max(0.5rem, var(--safe-area-right))
+      max(0.5rem, var(--safe-area-bottom))
+      max(0.5rem, var(--safe-area-left));
+  }
+
+  .app-search-safe-pad {
+    padding:
+      max(1.5rem, var(--safe-area-top))
+      max(1.5rem, var(--safe-area-right))
+      max(1.5rem, var(--safe-area-bottom))
+      max(1.5rem, var(--safe-area-left));
+  }
+}
+
 .glass-panel {
   background:
     linear-gradient(180deg, hsl(243 42% 12% / 0.88), hsl(236 48% 5% / 0.92)),

web/src/main.tsx

@@ -1,5 +1,8 @@
 import { render } from "preact";
 import { RootRouter } from "@/root-router";
+import { registerServiceWorker } from "@/pwa";
 import "./index.css";
 
+registerServiceWorker();
+
 render(<RootRouter />, document.getElementById("app")!);

web/src/pages/search-route-page.tsx

@@ -252,7 +252,7 @@ export default function SearchRoutePage() {
   }
 
   return (
-    <div className="h-full overflow-y-auto px-3 py-6 md:px-6">
+    <div className="app-search-safe-pad h-full overflow-y-auto">
       <div className="mx-auto w-full max-w-4xl space-y-5">
         <form
           className="flex items-center gap-2 rounded-xl border bg-background p-2 shadow-sm"

web/src/pwa.ts

@@ -0,0 +1,9 @@
+export function registerServiceWorker() {
+  if (!import.meta.env.PROD || !("serviceWorker" in navigator)) return;
+
+  window.addEventListener("load", () => {
+    void navigator.serviceWorker.register("/sw.js").catch((error: unknown) => {
+      console.warn("Sybil service worker registration failed", error);
+    });
+  });
+}