Re-introduce safe inset areas

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"