From 2a73adf588d47601862bb3834efa672444188bdc Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 12 Mar 2026 16:05:40 +0100
Subject: [PATCH] feat: update layout height to use dynamic viewport height for
 better responsiveness

---
 app/[locale]/calendar/page.tsx        |  2 +-
 app/[locale]/contacts/page.tsx        |  2 +-
 app/[locale]/page.tsx                 |  2 +-
 app/[locale]/settings/page.tsx        | 12 +++++++++---
 components/layout/navigation-rail.tsx |  2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/[locale]/calendar/page.tsx b/app/[locale]/calendar/page.tsx
index e3b98941..ebda2383 100644
--- a/app/[locale]/calendar/page.tsx
+++ b/app/[locale]/calendar/page.tsx
@@ -637,7 +637,7 @@ export default function CalendarPage() {
   };
 
   return (
-    <div className="flex h-screen bg-background">
+    <div className="flex h-dvh bg-background overflow-hidden">
       {/* Left Navigation Rail */}
       {!isMobile && (
         <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
diff --git a/app/[locale]/contacts/page.tsx b/app/[locale]/contacts/page.tsx
index a29c0fcc..a5b15c04 100644
--- a/app/[locale]/contacts/page.tsx
+++ b/app/[locale]/contacts/page.tsx
@@ -441,7 +441,7 @@ export default function ContactsPage() {
   };
 
   return (
-    <div className="flex h-screen bg-background">
+    <div className="flex h-dvh bg-background overflow-hidden">
       {!isMobile && (
         <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
           <NavigationRail
diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 5d85aca0..c687387b 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -827,7 +827,7 @@ export default function Home() {
 
   return (
     <DragDropProvider>
-      <div className="flex flex-col h-screen bg-background overflow-hidden">
+      <div className="flex flex-col h-dvh bg-background overflow-hidden">
         {connectionLost && (
           <div className="flex items-center justify-center gap-2 bg-destructive/10 border-b border-destructive/30 text-destructive text-sm py-1.5 px-4 flex-shrink-0">
             <RotateCcw className="h-3.5 w-3.5 animate-spin" />
diff --git a/app/[locale]/settings/page.tsx b/app/[locale]/settings/page.tsx
index a1716c7a..786da908 100644
--- a/app/[locale]/settings/page.tsx
+++ b/app/[locale]/settings/page.tsx
@@ -97,7 +97,7 @@ export default function SettingsPage() {
     // Mobile: show content view
     if (mobileShowContent) {
       return (
-        <div className="flex flex-col h-screen bg-background">
+        <div className="flex flex-col h-dvh bg-background">
           {/* Mobile content header */}
           <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
             <Button
@@ -117,13 +117,16 @@ export default function SettingsPage() {
               {renderTabContent()}
             </div>
           </div>
+
+          {/* Bottom Navigation */}
+          <NavigationRail orientation="horizontal" />
         </div>
       );
     }
 
     // Mobile: show tab list
     return (
-      <div className="flex flex-col h-screen bg-background">
+      <div className="flex flex-col h-dvh bg-background">
         {/* Mobile header */}
         <div className="flex items-center gap-2 px-4 h-14 border-b border-border bg-background shrink-0">
           <Button
@@ -155,13 +158,16 @@ export default function SettingsPage() {
             ))}
           </div>
         </div>
+
+        {/* Bottom Navigation */}
+        <NavigationRail orientation="horizontal" />
       </div>
     );
   }
 
   // Desktop layout
   return (
-    <div className="flex h-screen bg-background">
+    <div className="flex h-dvh bg-background">
       {/* Navigation Rail */}
       <div className="w-14 border-r border-border bg-secondary flex flex-col flex-shrink-0">
         <NavigationRail
diff --git a/components/layout/navigation-rail.tsx b/components/layout/navigation-rail.tsx
index 0477d445..8cbce4e4 100644
--- a/components/layout/navigation-rail.tsx
+++ b/components/layout/navigation-rail.tsx
@@ -161,7 +161,7 @@ export function NavigationRail({
   if (orientation === "horizontal") {
     return (
       <nav
-        className={cn("flex items-center justify-around bg-background border-t border-border", className)}
+        className={cn("flex items-center justify-around bg-background border-t border-border shrink-0", className)}
         role="navigation"
         aria-label={t("nav_label")}
       >