src/app.css

@@ -245,6 +245,30 @@
   @apply content-sizing content-padding-x content-padding-y;
 }
 
+@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 800px) {
+  .compact-landscape-hidden {
+    display: none !important;
+  }
+
+  .compact-landscape-flex {
+    display: flex !important;
+  }
+
+  .cw,
+  .cw-full {
+    left: 0 !important;
+    width: 100% !important;
+  }
+
+  .cb {
+    bottom: calc(var(--saib) + 3.5rem) !important;
+  }
+
+  [data-component="Page"] {
+    margin-bottom: 3.5rem !important;
+  }
+}
+
 .heading {
   @apply text-center text-2xl;
 }

src/app/components/PrimaryNav.svelte

@@ -29,47 +29,51 @@
   const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
 </script>
 
-<div
-  class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
-  <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
-    <PrimaryNavSpaces />
-    {#if PLATFORM_RELAYS.length > 0}
-      <Divider />
-    {/if}
-    <div>
-      <PrimaryNavItem
-        title="Settings"
-        href="/settings/profile"
-        prefix="/settings"
-        class="tooltip-right">
-        {#if $userProfile?.picture}
-          <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
-        {:else}
-          <ImageIcon alt="Settings" src={UserRounded} class="rounded-full" size={8} />
-        {/if}
-      </PrimaryNavItem>
-      <PrimaryNavItem
-        title="Messages"
-        onclick={chatHandler}
-        class="tooltip-right"
-        notification={$notifications.has("/chat")}>
-        <ImageIcon alt="Messages" src={Letter} size={8} />
-      </PrimaryNavItem>
-      <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
-        <ImageIcon alt="Search" src={Magnifier} size={8} />
-      </PrimaryNavItem>
+<div class="flex h-full min-h-[100dvh] overflow-hidden">
+  <div
+    class="ml-sai mt-sai mb-sai relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block compact-landscape-hidden">
+    <div class="flex h-full flex-col" class:justify-between={PLATFORM_RELAYS.length === 0}>
+      <PrimaryNavSpaces />
+      {#if PLATFORM_RELAYS.length > 0}
+        <Divider />
+      {/if}
+      <div>
+        <PrimaryNavItem
+          title="Settings"
+          href="/settings/profile"
+          prefix="/settings"
+          class="tooltip-right">
+          {#if $userProfile?.picture}
+            <ImageIcon alt="Settings" src={$userProfile?.picture} class="rounded-full" size={10} />
+          {:else}
+            <ImageIcon alt="Settings" src={UserRounded} class="rounded-full" size={8} />
+          {/if}
+        </PrimaryNavItem>
+        <PrimaryNavItem
+          title="Messages"
+          onclick={chatHandler}
+          class="tooltip-right"
+          notification={$notifications.has("/chat")}>
+          <ImageIcon alt="Messages" src={Letter} size={8} />
+        </PrimaryNavItem>
+        <PrimaryNavItem title="Search" href="/people" class="tooltip-right">
+          <ImageIcon alt="Search" src={Magnifier} size={8} />
+        </PrimaryNavItem>
+      </div>
     </div>
   </div>
+
+  <div class="min-w-0 flex-1 overflow-hidden">
+    {@render children?.()}
+  </div>
 </div>
 
-{@render children?.()}
-
 <!-- a little extra something for ios -->
 <div
-  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
+  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden compact-landscape-flex">
 </div>
 <div
-  class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="bottom-nav hide-on-keyboard border-top bottom-sai fixed left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden compact-landscape-flex">
   <div class="content-padding-x content-sizing flex justify-between px-2">
     <div class="flex gap-2 sm:gap-6">
       <PrimaryNavItem title="Search" href="/people">

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-screen w-60 sm:flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex compact-landscape-hidden",
     props.class,
   )}>
   {@render children?.()}