From de358fb5e8b8e1d15ea5e72fd99c2c8115a4036f Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Wed, 6 Nov 2024 21:52:04 +0100
Subject: [PATCH 1/3] feat: Add support for iOS safe area
---
packages/site-kit/src/app.html | 2 +-
packages/site-kit/src/lib/nav/Nav.svelte | 2 ++
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/site-kit/src/app.html b/packages/site-kit/src/app.html
index f8bbbb25dc..a15d98ca8f 100644
--- a/packages/site-kit/src/app.html
+++ b/packages/site-kit/src/app.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
%sveltekit.head%
</head>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index c1d1d321d6..68d263aa1f 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -311,6 +311,8 @@ Top navigation bar for the application. It provides a slot for the left side, th
nav {
top: unset;
bottom: 0;
+ padding-bottom: env(safe-area-inset-bottom);
+ height: calc(var(--sk-nav-height) + env(safe-area-inset-bottom));
}
.menu {
From ff98bcd744498fcf67eb7d30c8f21c37bd5efedf Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Wed, 6 Nov 2024 21:57:44 +0100
Subject: [PATCH 2/3] Fix display on "collapsed" state
---
packages/site-kit/src/lib/nav/Nav.svelte | 7 +++++--
1 file changed, 5 insertions(+), 2 deletions(-)
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 68d263aa1f..d284ad11b1 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -311,8 +311,11 @@ Top navigation bar for the application. It provides a slot for the left side, th
nav {
top: unset;
bottom: 0;
- padding-bottom: env(safe-area-inset-bottom);
- height: calc(var(--sk-nav-height) + env(safe-area-inset-bottom));
+
+ &.visible, &:focus-within {
+ padding-bottom: env(safe-area-inset-bottom);
+ height: calc(var(--sk-nav-height) + env(safe-area-inset-bottom));
+ }
}
.menu {
From a0b4981999273448013bf093338f36476ea60216 Mon Sep 17 00:00:00 2001
From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com>
Date: Wed, 6 Nov 2024 22:35:52 +0100
Subject: [PATCH 3/3] Remove useless viewport-fit
---
packages/site-kit/src/app.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/site-kit/src/app.html b/packages/site-kit/src/app.html
index a15d98ca8f..f8bbbb25dc 100644
--- a/packages/site-kit/src/app.html
+++ b/packages/site-kit/src/app.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head%
</head>