From b162d39f7b1adebe9a650ec0501b9dbe39f14d18 Mon Sep 17 00:00:00 2001
From: nayan9617 <nayanp4925@gmail.com>
Date: Thu, 2 Apr 2026 20:21:34 +0530
Subject: [PATCH] make landscape mode behave better on phones

---
 src/app/components/AppContainer.svelte      | 2 +-
 src/app/components/ContentLinkDetail.svelte | 2 +-
 src/lib/components/SecondaryNav.svelte      | 2 +-
 src/routes/chat/+page.svelte                | 2 +-
 src/routes/home/+page.svelte                | 2 +-
 src/routes/settings/about/+page.svelte      | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/components/AppContainer.svelte b/src/app/components/AppContainer.svelte
index 7956a8cb..506fbafc 100644
--- a/src/app/components/AppContainer.svelte
+++ b/src/app/components/AppContainer.svelte
@@ -14,7 +14,7 @@
   const {children}: Props = $props()
 </script>
 
-<div class="flex h-screen overflow-hidden">
+<div class="flex h-[100dvh] overflow-hidden">
   {#if $pubkey}
     <PrimaryNav>
       {@render children?.()}
diff --git a/src/app/components/ContentLinkDetail.svelte b/src/app/components/ContentLinkDetail.svelte
index 7c4e660e..b4823932 100644
--- a/src/app/components/ContentLinkDetail.svelte
+++ b/src/app/components/ContentLinkDetail.svelte
@@ -7,6 +7,6 @@
   const back = () => history.back()
 </script>
 
-<Button class="m-auto h-screen w-screen cursor-pointer p-4" onclick={back}>
+<Button class="m-auto h-[100dvh] w-[100dvw] cursor-pointer p-4" onclick={back}>
   <ContentLinkBlockImage {value} {event} class="m-auto max-h-full max-w-full rounded-box" />
 </Button>
diff --git a/src/lib/components/SecondaryNav.svelte b/src/lib/components/SecondaryNav.svelte
index c92c3eb7..7914ba93 100644
--- a/src/lib/components/SecondaryNav.svelte
+++ b/src/lib/components/SecondaryNav.svelte
@@ -12,7 +12,7 @@
 
 <div
   class={cx(
-    "ml-sai mt-sai mb-sai max-h-screen w-60 sm:flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "ml-sai mt-sai mb-sai max-h-[100dvh] w-60 sm:flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
     props.class,
   )}>
   {@render children?.()}
diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte
index e0974e8a..9337a2e4 100644
--- a/src/routes/chat/+page.svelte
+++ b/src/routes/chat/+page.svelte
@@ -21,7 +21,7 @@
   const chats = $derived($chatSearch.searchOptions(term))
 </script>
 
-<div class="hidden min-h-screen md:hero">
+<div class="hidden min-h-[100dvh] md:hero">
   <div class="col-2 hero-content text-center">
     <p class="row-2 text-lg">
       <Icon icon={InfoCircle} />
diff --git a/src/routes/home/+page.svelte b/src/routes/home/+page.svelte
index fad1b55f..c85d550b 100644
--- a/src/routes/home/+page.svelte
+++ b/src/routes/home/+page.svelte
@@ -19,7 +19,7 @@
   })
 </script>
 
-<div class="hero min-h-screen overflow-auto pb-8">
+<div class="hero min-h-[100dvh] overflow-auto pb-8">
   <div class="hero-content">
     <div class="column content gap-4">
       <h1 class="text-center text-5xl">Welcome to</h1>
diff --git a/src/routes/settings/about/+page.svelte b/src/routes/settings/about/+page.svelte
index c8583e85..e2e59cf9 100644
--- a/src/routes/settings/about/+page.svelte
+++ b/src/routes/settings/about/+page.svelte
@@ -18,7 +18,7 @@
   const openProfile = () => pushModal(ProfileDetail, {pubkey})
 </script>
 
-<div class="mt-8 min-h-screen bg-base-200 sm:hero">
+<div class="mt-8 min-h-[100dvh] bg-base-200 sm:hero">
   <div class="hero-content">
     <div class="column content gap-6">
       <p class="text-center text-2xl">Thanks for using</p>
-- 
2.52.0