Make ios with notches prettier

.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

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;

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,

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">

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>

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>

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>

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}