fix compact landscape page offsets on android

Co-authored-by: nayan9617 <nayanp4925@gmail.com>
Co-committed-by: nayan9617 <nayanp4925@gmail.com>

.env.template

@@ -5,6 +5,7 @@ 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.5;
+				MARKETING_VERSION = 1.7.2;
 				PRODUCT_BUNDLE_IDENTIFIER = social.flotilla;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

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/app/core/state.ts

@@ -191,7 +191,9 @@ export const PLATFORM_TERMS = import.meta.env.VITE_PLATFORM_TERMS
 
 export const PLATFORM_PRIVACY = import.meta.env.VITE_PLATFORM_PRIVACY
 
-export const PLATFORM_LOGO = PLATFORM_URL + "/logo.png"
+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_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",
+    "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?.()}