fix(examples): adjust layout for iOS

viewport-fit=cover to fix overflow on iOS
2 years ago · 33ba78cbce
parent 84b3612393
commit 33ba78cbce
3 changed files with 21 additions and 2 deletions
--- 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>

--- 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}
--- 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);
+}