diff --git a/examples/api/index.html b/examples/api/index.html
index 3b39b0f6..81b6f92e 100644
--- a/examples/api/index.html
+++ b/examples/api/index.html
@@ -2,7 +2,10 @@
 <html lang="en" theme="dark">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <title>Svelte + Vite App</title>
   </head>
 
diff --git a/examples/api/src/App.svelte b/examples/api/src/App.svelte
index 1b3c9b71..dd0df993 100644
--- a/examples/api/src/App.svelte
+++ b/examples/api/src/App.svelte
@@ -354,7 +354,7 @@
 <!-- Sidebar toggle, only visible on small screens -->
 <div
   id="sidebarToggle"
-  class="z-2000 display-none lt-sm:flex justify-center items-center absolute top-2 left-2 w-8 h-8 rd-8
+  class="z-2000 sidebar-toggle display-none lt-sm:flex justify-center absolute items-center w-8 h-8 rd-8
             bg-accent dark:bg-darkAccent active:bg-accentDark dark:active:bg-darkAccentDark"
 >
   {#if isSideBarOpen}
diff --git a/examples/api/src/app.css b/examples/api/src/app.css
index 77704c36..09ed66d1 100644
--- a/examples/api/src/app.css
+++ b/examples/api/src/app.css
@@ -39,3 +39,19 @@ code.code-block {
     transform: translateX(var(--translate-x));
   }
 }
+
+.sidebar-toggle {
+  margin-top: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+body {
+  overflow: hidden;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
+#sidebar,
+#console {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 24px);
+}
