Re-introduce safe inset areas

capacitor.config.ts

@@ -17,10 +17,10 @@ const config: CapacitorConfig = {
     },
   },
   // Use this for live reload https://capacitorjs.com/docs/guides/live-reload
-  server: {
+  // server: {
-    url: "http://192.168.1.115:1847",
+  //   url: "http://192.168.1.115:1847",
-    cleartext: true
+  //   cleartext: true
-  },
+  // },
 };
 
 export default config;

src/app.css

@@ -66,82 +66,80 @@ html {
   @apply bg-base-300;
 }
 
-/* ios */
+/* safe area insets */
 
-.pt-sai {
+@layer components {
-  padding-top: var(--sait);
+  .pt-sai {
-}
+    padding-top: var(--sait);
+  }
 
-.pr-sai {
+  .pr-sai {
-  padding-right: var(--sair);
+    padding-right: var(--sair);
-}
+  }
 
-.pb-sai {
+  .pb-sai {
-  padding-bottom: var(--saib);
+    padding-bottom: var(--saib);
-}
+  }
 
-.pl-sai {
+  .pl-sai {
-  padding-left: var(--sail);
+    padding-left: var(--sail);
-}
+  }
 
-.px-sai {
+  .px-sai {
-  @apply pl-sai pr-sai;
+    @apply pl-sai pr-sai;
-}
+  }
 
-.py-sai {
+  .py-sai {
-  @apply pt-sai pb-sai;
+    @apply pt-sai pb-sai;
-}
+  }
 
-.p-sai {
+  .p-sai {
-  @apply py-sai px-sai;
+    @apply py-sai px-sai;
-}
+  }
 
-.mt-sai {
+  .mt-sai {
-  padding-top: var(--sait);
+    padding-top: var(--sait);
-}
+  }
 
-.mr-sai {
+  .mr-sai {
-  padding-right: var(--sair);
+    padding-right: var(--sair);
-}
+  }
 
-.mb-sai {
+  .mb-sai {
-  padding-bottom: var(--saib);
+    padding-bottom: var(--saib);
-}
+  }
 
-.ml-sai {
+  .ml-sai {
-  padding-left: var(--sail);
+    padding-left: var(--sail);
-}
+  }
 
-.mx-sai {
+  .mx-sai {
-  @apply ml-sai mr-sai;
+    @apply ml-sai mr-sai;
-}
+  }
 
-.my-sai {
+  .my-sai {
-  @apply mt-sai mb-sai;
+    @apply mt-sai mb-sai;
-}
+  }
 
-.m-sai {
+  .m-sai {
-  @apply my-sai mx-sai;
+    @apply my-sai mx-sai;
-}
+  }
 
-.top-sai {
+  .top-sai {
-  top: var(--sait);
+    top: var(--sait);
-}
+  }
 
-.right-sai {
+  .right-sai {
-  right: var(--sair);
+    right: var(--sair);
-}
+  }
 
-.bottom-sai {
+  .bottom-sai {
-  bottom: var(--saib);
+    bottom: var(--saib);
-}
+  }
 
-.left-sai {
+  .left-sai {
-  left: var(--sail);
+    left: var(--sail);
-}
+  }
-
-.h-saib {
-  height: var(--saib);
 }
 
 /* utilities */
@@ -381,11 +379,11 @@ progress[value]::-webkit-progress-value {
 /* content width for fixed elements */
 
 .cw {
-  @apply w-full md:w-[calc(100%-18.5rem)];
+  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
 }
 
 .cb {
-  @apply bottom-14 md:bottom-0;
+  @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
 }
 
 /* chat view */

src/app/components/Chat.svelte

@@ -126,9 +126,11 @@
     })
 
     observer.observe(chatCompose!)
+    observer.observe(dynamicPadding!)
 
     return () => {
       observer.unobserve(chatCompose!)
+      observer.unobserve(dynamicPadding!)
     }
   })
 

src/app/components/PrimaryNav.svelte

@@ -51,7 +51,8 @@
 
 <svelte:window bind:innerHeight={windowHeight} />
 
-<div class="relative z-nav hidden w-14 flex-shrink-0 bg-base-200 pt-4 md:block">
+<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 justify-between">
     <div>
       {#if PLATFORM_RELAY}
@@ -103,9 +104,9 @@
 {@render children?.()}
 
 <!-- a little extra something for ios -->
-<div class="fixed bottom-0 left-0 right-0 z-nav h-saib bg-base-100 md:hidden"></div>
+<div class="fixed bottom-0 left-0 right-0 z-nav h-[var(--saib)] bg-base-100 md:hidden"></div>
 <div
-  class="border-top bottom-0 fixed 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/app/components/ProfileDetail.svelte

@@ -66,7 +66,7 @@
   </div>
   <ProfileInfo {pubkey} {url} />
   <ModalFooter>
-    <Button onclick={back} class="btn btn-link">
+    <Button onclick={back} class="btn btn-link hidden md:block">
       <Icon icon="alt-arrow-left" />
       Go back
     </Button>

src/app/components/Toast.svelte

@@ -8,7 +8,7 @@
 
 {#if $toast}
   {@const theme = $toast.theme || "info"}
-  <div transition:fly class="toast z-toast">
+  <div transition:fly class="bottom-sai right-sai toast z-toast">
     {#key $toast.id}
       <div
         role="alert"

src/lib/components/ContentSearch.svelte

@@ -8,13 +8,13 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="col-2 content-padding-t content-padding-x h-full {props.class}">
+<div class="content-padding-t content-padding-x flex h-full flex-col gap-1 {props.class}">
   <div class="z-feature">
     <div class="content-sizing">
       {@render props.input?.()}
     </div>
   </div>
-  <div class="scroll-container overflow-auto pt-2">
+  <div class="scroll-container overflow-auto">
     <div class="content-sizing">
       {@render props.content?.()}
     </div>

src/lib/components/Drawer.svelte

@@ -12,7 +12,7 @@
     onclick={onClose}>
   </button>
   <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 py-sai pr-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}}>
     {@render children?.()}
   </div>

src/lib/components/Page.svelte

@@ -9,6 +9,6 @@
 
 <div
   data-component="Page"
-  class="scroll-container mb-14 max-h-screen flex-grow overflow-auto bg-base-200 md:mb-0 {props.class}">
+  class="scroll-container bottom-sai top-sai cw fixed mb-14 overflow-auto bg-base-200 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>

src/lib/components/PageBar.svelte

@@ -11,9 +11,9 @@
   const {...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="cw fixed top-2 z-feature rounded-xl px-2 pt-2 {props.class}">
+<div data-component="PageBar" class="cw top-sai fixed z-feature p-2">
   <div
-    class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
+    class="flex min-h-12 items-center justify-between gap-4 rounded-xl rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
       {@render props.icon?.()}
       {@render props.title?.()}

src/lib/components/PageContent.svelte

@@ -13,6 +13,7 @@
 <div
   {...props}
   bind:this={element}
-  class="scroll-container cw fixed top-12 h-[calc(100%-6.5rem)] overflow-y-auto overflow-x-hidden md:h-[calc(100%-3rem)] {props.class}">
+  data-component="PageContent"
+  class="scroll-container cw md:bottom-sai fixed bottom-[calc(var(--saib)+3.5rem)] top-[calc(var(--sait)+3rem)] overflow-y-auto overflow-x-hidden {props.class}">
   {@render children?.()}
 </div>

src/lib/components/SecondaryNav.svelte

@@ -6,6 +6,7 @@
   const {children}: Props = $props()
 </script>
 
-<div class="hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
+<div
+  class="ml-sai mt-sai mb-sai hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
   {@render children?.()}
 </div>

src/routes/settings/about/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {Capacitor} from "@capacitor/core"
   import Link from "@lib/components/Link.svelte"
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
@@ -19,13 +20,15 @@
       <p class="text-center text-2xl">Thanks for using</p>
       <h1 class="mb-4 text-center text-5xl font-bold uppercase">{PLATFORM_NAME}</h1>
       <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
-        <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
+        {#if Capacitor.getPlatform() !== "ios"}
-          <h3 class="text-2xl sm:h-12">Donate</h3>
+          <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
-          <p class="sm:h-16">Funds will be used to support development.</p>
+            <h3 class="text-2xl sm:h-12">Donate</h3>
-          <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
+            <p class="sm:h-16">Funds will be used to support development.</p>
-            Support the Developer
+            <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
-          </Link>
+              Support the Developer
-        </div>
+            </Link>
+          </div>
+        {/if}
         <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
           <h3 class="text-2xl sm:h-12">Get in touch</h3>
           <p class="sm:h-16">Having problems? Let us know.</p>

src/routes/spaces/[relay]/+page.svelte

@@ -189,8 +189,8 @@
     </Button>
   </div>
   {#if pubkey}
+    <Divider>Recent posts from the relay admin</Divider>
     <div class="hidden flex-col gap-2" class:!flex={relayAdminEvents.length > 0}>
-      <Divider>Recent posts from the relay admin</Divider>
       <ProfileFeed hideLoading {url} {pubkey} bind:events={relayAdminEvents} />
     </div>
   {/if}

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -213,13 +213,17 @@
     }))
 
     const observer = new ResizeObserver(() => {
-      dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
+      if (dynamicPadding && chatCompose) {
+        dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
+      }
     })
 
     observer.observe(chatCompose!)
+    observer.observe(dynamicPadding!)
 
     return () => {
       observer.unobserve(chatCompose!)
+      observer.unobserve(dynamicPadding!)
     }
   })