make landscape mode behave better on phones

.env.template

@@ -5,7 +5,6 @@ VITE_PLATFORM_URL=https://app.flotilla.social
 VITE_PLATFORM_TERMS=https://flotilla.social/terms
 VITE_PLATFORM_PRIVACY=https://flotilla.social/privacy
 VITE_PLATFORM_NAME=Flotilla
-# Can be a local path (e.g. static/logo.png) or a full https URL
 VITE_PLATFORM_LOGO=static/logo.png
 VITE_PLATFORM_RELAYS=
 VITE_PLATFORM_ACCENT="#7161FF"

ios/App/App.xcodeproj/project.pbxproj

@@ -392,7 +392,7 @@
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.social-networking";
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 1.7.2;
+				MARKETING_VERSION = 1.7.5;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

src/app.css

@@ -245,30 +245,6 @@
   @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/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/app/components/PrimaryNav.svelte

@@ -29,51 +29,47 @@
   const anySpaceNotifications = $derived($userSpaceUrls.some(p => $notifications.has(p)))
 </script>
 
-<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
+  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>
   </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 compact-landscape-flex">
+  class="bottom-nav hide-on-keyboard fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden">
 </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 compact-landscape-flex">
+  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">
   <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/app/core/state.ts

@@ -191,9 +191,7 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = import.meta.env.PROD
-  ? PLATFORM_URL + "/logo.png"
-  : import.meta.env.VITE_PLATFORM_LOGO || PLATFORM_URL + "/logo.png"
+export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 

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 compact-landscape-hidden",
+    "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>