From c6d043f7ac18c88c6de6c6b90bbd4b8146d0fce7 Mon Sep 17 00:00:00 2001
From: Peter Rounce <peter@rounce.me.uk>
Date: Thu, 2 Jul 2026 14:26:17 +0000
Subject: [PATCH] Fix admin UI not using full vertical space on mobile (WWT-40)
 (0.22.5)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The admin app shell was sized with `h-screen` (`height: 100vh`). On
Android Chrome `100vh` does not track the dynamic browser toolbar, so
the shell rendered shorter than the visible viewport — leaving a large
empty region at the bottom of the screen and clipping content (e.g. the
Lightning Address / QR card on the Card Detail page, per the report).

Switch the full-height layout roots from static viewport-height units to
dynamic ones so the layout always fills the actual visible viewport:

- app-shell.tsx: `h-screen` -> `h-dvh` (the reported bug)
- App.tsx: auth-loading splash and error boundary `h-screen` -> `h-dvh`
- login.tsx / register.tsx: `min-h-screen` -> `min-h-dvh`

`dvh` (dynamic viewport height) is supported on all evergreen browsers
including Pixel Chrome; Tailwind v4 emits the utilities natively.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 CLAUDE.md                                         | 2 +-
 docker/card/admin-ui/src/App.tsx                  | 4 ++--
 docker/card/admin-ui/src/components/app-shell.tsx | 2 +-
 docker/card/admin-ui/src/pages/login.tsx          | 2 +-
 docker/card/admin-ui/src/pages/register.tsx       | 2 +-
 docker/card/build/build.go                        | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index cc8a76d..4bef5fa 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -95,7 +95,7 @@ Entry point: `main.go` → opens SQLite DB → runs CLI or starts HTTP server on
 - `phoenix/` — HTTP client for Phoenix Server API (invoices, payments, balance, channels). Uses basic auth from phoenix config (password cached at startup with `sync.Once`)
 - `crypto/` — AES-CMAC authentication and AES decryption for Bolt Card NFC protocol
 - `util/` — Error handling helpers (`CheckAndLog`), random hex generation, QR code encoding
-- `build/` — Version string (currently "0.22.4"), date/time injected at build
+- `build/` — Version string (currently "0.22.5"), date/time injected at build
 - `web-content/` — Static assets under `public/`, SPA build output under `admin/spa/`
 
 ### Route Groups (`web/app.go`)
diff --git a/docker/card/admin-ui/src/App.tsx b/docker/card/admin-ui/src/App.tsx
index 0c2539f..9f5ada4 100644
--- a/docker/card/admin-ui/src/App.tsx
+++ b/docker/card/admin-ui/src/App.tsx
@@ -45,7 +45,7 @@ function AuthGate() {
 
   if (loading) {
     return (
-      <div className="flex h-screen items-center justify-center">
+      <div className="flex h-dvh items-center justify-center">
         <div className="h-6 w-6 animate-pulse rounded-full bg-primary" />
       </div>
     );
@@ -125,7 +125,7 @@ class ErrorBoundary extends Component<
   render() {
     if (this.state.error) {
       return (
-        <div className="flex h-screen flex-col items-center justify-center gap-4 p-4">
+        <div className="flex h-dvh flex-col items-center justify-center gap-4 p-4">
           <h1 className="text-xl font-bold">Something went wrong</h1>
           <p className="text-sm text-muted-foreground">
             {this.state.error.message}
diff --git a/docker/card/admin-ui/src/components/app-shell.tsx b/docker/card/admin-ui/src/components/app-shell.tsx
index db6b684..50a9991 100644
--- a/docker/card/admin-ui/src/components/app-shell.tsx
+++ b/docker/card/admin-ui/src/components/app-shell.tsx
@@ -33,7 +33,7 @@ export function AppShell() {
 
   return (
     <WebSocketProvider>
-      <div className="flex h-screen">
+      <div className="flex h-dvh">
         {/* Desktop sidebar */}
         <aside className="hidden w-56 border-r bg-card md:block">
           <Sidebar />
diff --git a/docker/card/admin-ui/src/pages/login.tsx b/docker/card/admin-ui/src/pages/login.tsx
index 88d92e5..e52d1fa 100644
--- a/docker/card/admin-ui/src/pages/login.tsx
+++ b/docker/card/admin-ui/src/pages/login.tsx
@@ -35,7 +35,7 @@ export function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <div className="min-h-dvh flex items-center justify-center p-4">
       <Card className="w-full max-w-sm">
         <CardHeader className="text-center">
           <a href="/" className="inline-block mx-auto">
diff --git a/docker/card/admin-ui/src/pages/register.tsx b/docker/card/admin-ui/src/pages/register.tsx
index d68cbd1..fde12c2 100644
--- a/docker/card/admin-ui/src/pages/register.tsx
+++ b/docker/card/admin-ui/src/pages/register.tsx
@@ -27,7 +27,7 @@ export function RegisterPage() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-4">
+    <div className="min-h-dvh flex items-center justify-center p-4">
       <Card className="w-full max-w-sm">
         <CardHeader className="text-center">
           <Zap className="mx-auto h-8 w-8 text-primary" />
diff --git a/docker/card/build/build.go b/docker/card/build/build.go
index 414e2a1..0f7c079 100644
--- a/docker/card/build/build.go
+++ b/docker/card/build/build.go
@@ -1,5 +1,5 @@
 package build
 
-var Version string = "0.22.4"
+var Version string = "0.22.5"
 var Date string
 var Time string