make landscape mode behave better on phones

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?.()}

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>

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?.()}

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} />

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>

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>