From a2c4cfd95590dd9cb45324755a9981f03ae5d39e Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Wed, 6 May 2026 07:13:52 +0200
Subject: [PATCH] fix(layout): swap 100vh/h-screen for dvh so bottom navs
 survive browser chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In non-PWA browser tabs (especially iOS Safari), 100vh is the largest possible
viewport — it doesn't shrink when the bottom URL bar slides in, so fixed-bottom
navs get occluded. 100dvh tracks the dynamic viewport, so layouts reflow and
nav stays clickable. Safe-area-inset-bottom padding on the navs themselves is
already in place.
---
 src/App.vue                                            | 4 ++--
 src/accounting-app/App.vue                             | 4 ++--
 src/activities-app/App.vue                             | 4 ++--
 src/chat-app/App.vue                                   | 4 ++--
 src/components/layout/AppLayout.vue                    | 2 +-
 src/forum-app/App.vue                                  | 4 ++--
 src/market-app/App.vue                                 | 4 ++--
 src/modules/activities/views/ActivitiesMapPage.vue     | 2 +-
 src/modules/chat/views/ChatPage.vue                    | 6 +++---
 src/modules/forum/components/SubmissionDetail.vue      | 2 +-
 src/modules/forum/views/ForumListPage.vue              | 2 +-
 src/modules/nostr-feed/components/SubmissionDetail.vue | 2 +-
 src/modules/tasks/views/TasksPage.vue                  | 2 +-
 src/pages/Home.vue                                     | 2 +-
 src/pages/Hub.vue                                      | 2 +-
 src/pages/Login.vue                                    | 2 +-
 src/pages/LoginDemo.vue                                | 2 +-
 src/tasks-app/App.vue                                  | 4 ++--
 src/wallet-app/App.vue                                 | 4 ++--
 19 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8c7f8ba..6e5a91d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -26,8 +26,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <div v-if="!isLoginPage && !isAuthenticated" class="fixed top-0 right-0 z-50 p-3" style="padding-top: env(safe-area-inset-top)">
diff --git a/src/accounting-app/App.vue b/src/accounting-app/App.vue
index c0f02ce..8fe3aa8 100644
--- a/src/accounting-app/App.vue
+++ b/src/accounting-app/App.vue
@@ -49,8 +49,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <!-- Top bar with login -->
diff --git a/src/activities-app/App.vue b/src/activities-app/App.vue
index bc520ae..7214093 100644
--- a/src/activities-app/App.vue
+++ b/src/activities-app/App.vue
@@ -46,8 +46,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <!-- Main content (with bottom padding for nav bar) -->
diff --git a/src/chat-app/App.vue b/src/chat-app/App.vue
index 8c7f8ba..6e5a91d 100644
--- a/src/chat-app/App.vue
+++ b/src/chat-app/App.vue
@@ -26,8 +26,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <div v-if="!isLoginPage && !isAuthenticated" class="fixed top-0 right-0 z-50 p-3" style="padding-top: env(safe-area-inset-top)">
diff --git a/src/components/layout/AppLayout.vue b/src/components/layout/AppLayout.vue
index aac73c2..ecf8355 100644
--- a/src/components/layout/AppLayout.vue
+++ b/src/components/layout/AppLayout.vue
@@ -12,7 +12,7 @@ const openSidebar = () => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background">
+  <div class="min-h-dvh bg-background">
     <!-- Mobile Drawer -->
     <MobileDrawer v-model:open="sidebarOpen" />
 
diff --git a/src/forum-app/App.vue b/src/forum-app/App.vue
index c8c1abb..cc94140 100644
--- a/src/forum-app/App.vue
+++ b/src/forum-app/App.vue
@@ -59,8 +59,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <div v-if="!isLoginPage && !isAuthenticated" class="fixed top-0 right-0 z-50 p-3" style="padding-top: env(safe-area-inset-top)">
diff --git a/src/market-app/App.vue b/src/market-app/App.vue
index 7d40951..51dc59f 100644
--- a/src/market-app/App.vue
+++ b/src/market-app/App.vue
@@ -69,8 +69,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <main class="flex-1" :class="{ 'pb-16': !isLoginPage }">
diff --git a/src/modules/activities/views/ActivitiesMapPage.vue b/src/modules/activities/views/ActivitiesMapPage.vue
index 4a7d533..63b7e4e 100644
--- a/src/modules/activities/views/ActivitiesMapPage.vue
+++ b/src/modules/activities/views/ActivitiesMapPage.vue
@@ -26,7 +26,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col h-[calc(100vh-3.5rem)]">
+  <div class="flex flex-col h-[calc(100dvh-3.5rem)]">
     <!-- Loading overlay -->
     <div v-if="isLoading && geoActivities.length === 0" class="flex-1 flex items-center justify-center">
       <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
diff --git a/src/modules/chat/views/ChatPage.vue b/src/modules/chat/views/ChatPage.vue
index e6d48f9..5ea220f 100644
--- a/src/modules/chat/views/ChatPage.vue
+++ b/src/modules/chat/views/ChatPage.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- Loading State -->
-  <div v-if="isLoading" class="flex flex-col items-center justify-center min-h-screen">
+  <div v-if="isLoading" class="flex flex-col items-center justify-center min-h-dvh">
     <div class="flex flex-col items-center space-y-4">
       <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
       <div class="text-center space-y-2">
@@ -11,7 +11,7 @@
   </div>
 
   <!-- Error State -->
-  <div v-else-if="error" class="flex flex-col items-center justify-center min-h-screen">
+  <div v-else-if="error" class="flex flex-col items-center justify-center min-h-dvh">
     <div class="text-center space-y-4">
       <h2 class="text-xl font-semibold text-red-600">Failed to load chat</h2>
       <p class="text-muted-foreground">{{ error }}</p>
@@ -22,7 +22,7 @@
   </div>
 
   <!-- Chat Content - Only render when module is ready -->
-  <div v-else class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
+  <div v-else class="h-[calc(100dvh-3.5rem)] lg:h-[calc(100dvh-4rem)] xl:h-[calc(100dvh-5rem)] w-full">
     <ChatComponent />
   </div>
 </template>
diff --git a/src/modules/forum/components/SubmissionDetail.vue b/src/modules/forum/components/SubmissionDetail.vue
index 4f3b02f..ae5e8c9 100644
--- a/src/modules/forum/components/SubmissionDetail.vue
+++ b/src/modules/forum/components/SubmissionDetail.vue
@@ -275,7 +275,7 @@ watch(comments, (newComments) => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background">
+  <div class="min-h-dvh bg-background">
     <!-- Header -->
     <header class="sticky top-0 z-30 bg-background/95 backdrop-blur border-b">
       <div class="max-w-4xl mx-auto px-4 py-3">
diff --git a/src/modules/forum/views/ForumListPage.vue b/src/modules/forum/views/ForumListPage.vue
index 9c9246b..101c7ae 100644
--- a/src/modules/forum/views/ForumListPage.vue
+++ b/src/modules/forum/views/ForumListPage.vue
@@ -11,7 +11,7 @@ function onSubmissionClick(submission: SubmissionWithMeta) {
 </script>
 
 <template>
-  <div class="flex flex-col h-screen bg-background">
+  <div class="flex flex-col h-dvh bg-background">
     <div class="sticky top-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
       <div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
         <h1 class="text-lg font-semibold">Forum</h1>
diff --git a/src/modules/nostr-feed/components/SubmissionDetail.vue b/src/modules/nostr-feed/components/SubmissionDetail.vue
index 1b00bbe..156bd1c 100644
--- a/src/modules/nostr-feed/components/SubmissionDetail.vue
+++ b/src/modules/nostr-feed/components/SubmissionDetail.vue
@@ -275,7 +275,7 @@ watch(comments, (newComments) => {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background">
+  <div class="min-h-dvh bg-background">
     <!-- Header -->
     <header class="sticky top-0 z-30 bg-background/95 backdrop-blur border-b">
       <div class="max-w-4xl mx-auto px-4 py-3">
diff --git a/src/modules/tasks/views/TasksPage.vue b/src/modules/tasks/views/TasksPage.vue
index 77ae884..dbd6e61 100644
--- a/src/modules/tasks/views/TasksPage.vue
+++ b/src/modules/tasks/views/TasksPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-screen bg-background">
+  <div class="flex flex-col h-dvh bg-background">
     <!-- Header -->
     <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
       <div class="flex items-center justify-between px-4 py-2 sm:px-6">
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 4da9856..2108f1e 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col h-screen bg-background">
+  <div class="flex flex-col h-dvh bg-background">
     <PWAInstallPrompt auto-show />
 
     <!-- Header -->
diff --git a/src/pages/Hub.vue b/src/pages/Hub.vue
index b29ea41..bf54436 100644
--- a/src/pages/Hub.vue
+++ b/src/pages/Hub.vue
@@ -96,7 +96,7 @@ function notImplemented() {
 </script>
 
 <template>
-  <div class="relative h-screen flex flex-col text-foreground overflow-hidden bg-background"
+  <div class="relative h-dvh flex flex-col text-foreground overflow-hidden bg-background"
     style="
       background-image:
         linear-gradient(to bottom,
diff --git a/src/pages/Login.vue b/src/pages/Login.vue
index 1d04f16..f0318ac 100644
--- a/src/pages/Login.vue
+++ b/src/pages/Login.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center p-4 bg-gradient-to-br from-background via-background to-muted/20">
+  <div class="min-h-dvh flex items-center justify-center p-4 bg-gradient-to-br from-background via-background to-muted/20">
     <div class="w-full max-w-md space-y-8">
       <!-- Logo and Title -->
       <div class="text-center space-y-6">
diff --git a/src/pages/LoginDemo.vue b/src/pages/LoginDemo.vue
index f90aaa7..13a8dd1 100644
--- a/src/pages/LoginDemo.vue
+++ b/src/pages/LoginDemo.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-h-screen flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
+    class="min-h-dvh flex items-start sm:items-center justify-center px-4 sm:px-6 lg:px-8 xl:px-12 2xl:px-16 py-8 sm:py-12">
     <div class="flex flex-col items-center justify-center space-y-3 sm:space-y-6 max-w-4xl mx-auto w-full mt-8 sm:mt-0">
       <!-- Welcome Section -->
       <div class="text-center space-y-2 sm:space-y-4">
diff --git a/src/tasks-app/App.vue b/src/tasks-app/App.vue
index 8c7f8ba..6e5a91d 100644
--- a/src/tasks-app/App.vue
+++ b/src/tasks-app/App.vue
@@ -26,8 +26,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <div v-if="!isLoginPage && !isAuthenticated" class="fixed top-0 right-0 z-50 p-3" style="padding-top: env(safe-area-inset-top)">
diff --git a/src/wallet-app/App.vue b/src/wallet-app/App.vue
index d4e6045..b50706d 100644
--- a/src/wallet-app/App.vue
+++ b/src/wallet-app/App.vue
@@ -26,8 +26,8 @@ async function handleLoginSuccess() {
 </script>
 
 <template>
-  <div class="min-h-screen bg-background font-sans antialiased">
-    <div class="relative flex min-h-screen flex-col"
+  <div class="min-h-dvh bg-background font-sans antialiased">
+    <div class="relative flex min-h-dvh flex-col"
       style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)">
 
       <!-- Top bar with login -->