Re-introduce safe inset areas

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">
-          <h3 class="text-2xl sm:h-12">Donate</h3>
-          <p class="sm:h-16">Funds will be used to support development.</p>
-          <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
-            Support the Developer
-          </Link>
-        </div>
+        {#if Capacitor.getPlatform() !== "ios"}
+          <div class="card2 bg-alt flex flex-col gap-2 text-center shadow-2xl">
+            <h3 class="text-2xl sm:h-12">Donate</h3>
+            <p class="sm:h-16">Funds will be used to support development.</p>
+            <Link external href="https://geyser.fund/project/flotilla" class="btn btn-primary">
+              Support the Developer
+            </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>