src/app.css

@@ -245,6 +245,20 @@
   @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;
+  }
+
+  .cw {
+    @apply left-[15rem] w-[calc(100%-15rem-var(--sair))];
+  }
+
+  .cw-full {
+    @apply left-0 w-[calc(100%-var(--sair))];
+  }
+}
+
 .heading {
   @apply text-center text-2xl;
 }

src/app/components/PrimaryNav.svelte

@@ -32,7 +32,7 @@
 </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">
+  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}