From bcd94ee75e41124c5b3af7efbff7030ac9f0d9d4 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Fri, 31 Jan 2025 17:40:14 -0800
Subject: [PATCH] Make ios with notches prettier

---
 .fdignore                                     |  2 +
 capacitor.config.ts                           |  5 ++
 src/app.css                                   | 47 +++++++++++++++++++
 src/app/components/PrimaryNav.svelte          |  6 ++-
 src/lib/components/Drawer.svelte              |  2 +-
 src/lib/components/Page.svelte                |  2 +-
 src/lib/components/SecondaryNav.svelte        |  3 +-
 src/routes/spaces/[relay]/[room]/+page.svelte |  4 +-
 8 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/.fdignore b/.fdignore
index 2b1303d9..2af7ced2 100644
--- a/.fdignore
+++ b/.fdignore
@@ -7,6 +7,8 @@ build
 gradlew*
 _app
 release
+ios/DerivedData/
+ios/App/Pods/
 android/capacitor-cordova-android-plugins
 android/app/src/androidTest
 android/app/src/test
diff --git a/capacitor.config.ts b/capacitor.config.ts
index 6fdc3d2c..fe3869a7 100644
--- a/capacitor.config.ts
+++ b/capacitor.config.ts
@@ -12,6 +12,11 @@ const config: CapacitorConfig = {
       androidSplashResourceName: "splash"
     }
   },
+  // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
+  // server: {
+  //   url: "http://192.168.1.251:1847",
+  //   cleartext: true
+  // },
 };
 
 export default config;
diff --git a/src/app.css b/src/app.css
index 1c7ef743..69fb7b12 100644
--- a/src/app.css
+++ b/src/app.css
@@ -54,11 +54,58 @@
   --secondary-content: oklch(var(--sc));
 }
 
+:root,
 body,
 html {
   @apply bg-base-300;
 }
 
+/* ios */
+
+.sait {
+  padding-top: env(safe-area-inset-top);
+}
+
+.sair {
+  padding-right: env(safe-area-inset-right);
+}
+
+.saib {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.sail {
+  padding-left: env(safe-area-inset-left);
+}
+
+.saix {
+  @apply sail sair;
+}
+
+.saiy {
+  @apply sait saib;
+}
+
+.sai {
+  @apply saiy saix;
+}
+
+.top-sai {
+  top: env(safe-area-inset-top);
+}
+
+.right-sai {
+  right: env(safe-area-inset-right);
+}
+
+.bottom-sai {
+  bottom: env(safe-area-inset-bottom);
+}
+
+.left-sai {
+  left: env(safe-area-inset-left);
+}
+
 /* utilities */
 
 .bg-alt,
diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index 7de6cb74..0851e946 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/src/app/components/PrimaryNav.svelte
@@ -30,7 +30,7 @@
   )
 </script>
 
-<div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+<div class="sail sait saib relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
   <div class="flex h-full flex-col justify-between">
     <div>
       {#if PLATFORM_RELAY}
@@ -72,8 +72,10 @@
 
 <slot />
 
+<!-- a little extra something for ios -->
+<div class="fixed bottom-0 left-0 right-0 z-nav h-14 bg-base-100 md:hidden" />
 <div
-  class="border-top fixed bottom-0 left-0 right-0 z-nav h-14 border border-base-200 bg-base-100 md:hidden">
+  class="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-8">
       <PrimaryNavItem title="Home" href="/home">
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
index 9e6298eb..190d26e3 100644
--- a/src/lib/components/Drawer.svelte
+++ b/src/lib/components/Drawer.svelte
@@ -10,7 +10,7 @@
     transition:fade
     on:click={onClose} />
   <div
-    class="scroll-container absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
+    class="scroll-container saiy sair absolute bottom-0 right-0 top-0 w-80 overflow-auto bg-base-200 text-base-content lg:w-96"
     transition:translate={{axis: "x", duration: 300}}>
     <slot />
   </div>
diff --git a/src/lib/components/Page.svelte b/src/lib/components/Page.svelte
index f440fa24..c600df34 100644
--- a/src/lib/components/Page.svelte
+++ b/src/lib/components/Page.svelte
@@ -1,4 +1,4 @@
 <div
-  class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
+  class="sait saib sair scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
   <slot />
 </div>
diff --git a/src/lib/components/SecondaryNav.svelte b/src/lib/components/SecondaryNav.svelte
index ad601f5a..1825f2ae 100644
--- a/src/lib/components/SecondaryNav.svelte
+++ b/src/lib/components/SecondaryNav.svelte
@@ -1,3 +1,4 @@
-<div class="hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
+<div
+  class="sail sait saib hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
   <slot />
 </div>
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index b3d0e8ba..60150acd 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -195,7 +195,7 @@
   })
 </script>
 
-<div class="relative flex h-full flex-col">
+<div class="saib relative flex h-full flex-col">
   <PageBar>
     <div slot="icon" class="center">
       <Icon icon="hashtag" />
@@ -259,7 +259,7 @@
       </div>
     </div>
   {/if}
-  <div>
+  <div class="saib">
     {#if parent}
       <ChannelComposeParent event={parent} clear={clearParent} />
     {/if}