From 662ce0ec3fbe13dc408e2e145da488d0d5320ae1 Mon Sep 17 00:00:00 2001
From: Bastiaan Verhaar <3987804+bastiaanv@users.noreply.github.com>
Date: Mon, 14 Nov 2022 10:07:42 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(bottom-navigation):=20Bottom?=
 =?UTF-8?q?=20navigation=20respects=20the=20iOS=20safe-area=20(#1354)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🐛 fix(bottom-navigation): Bottom navigation respects the iOS safe-area

* 💄 style: Restore syntax
---
 src/components/unstyled/bottom-navigation.css              | 1 +
 src/docs/src/routes/components/bottom-navigation.svelte.md | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/unstyled/bottom-navigation.css b/src/components/unstyled/bottom-navigation.css
index 615e7601633..3b7fb29d38f 100644
--- a/src/components/unstyled/bottom-navigation.css
+++ b/src/components/unstyled/bottom-navigation.css
@@ -1,5 +1,6 @@
 .btm-nav {
   @apply flex flex-row items-center justify-around fixed bottom-0 left-0 right-0 w-full;
+  padding-bottom: env(safe-area-inset-bottom);
   &>* {
     @apply flex items-center justify-center flex-col basis-full h-full cursor-pointer relative gap-1;
   }
diff --git a/src/docs/src/routes/components/bottom-navigation.svelte.md b/src/docs/src/routes/components/bottom-navigation.svelte.md
index 0b0ad89c32c..5a8c3389fc8 100644
--- a/src/docs/src/routes/components/bottom-navigation.svelte.md
+++ b/src/docs/src/routes/components/bottom-navigation.svelte.md
@@ -23,6 +23,13 @@ data="{[
 ]}"
 />
 
+<div class="alert alert-info text-sm mb-2">
+  <div>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+    The &lt;meta name="viewport" content="viewport-fit=cover"&gt; is required for responsive of the bottom navigation in iOS.
+  </div>
+</div>
+
 <Component title="Bottom Navigation">
 <div class="btm-nav relative">
   <button>