From 019f10792f953bed3f2f68ec40ba7e1dd631622a Mon Sep 17 00:00:00 2001
From: Ice Lam <pinky.yy.lam@gmail.com>
Date: Mon, 1 Apr 2024 17:11:31 +0800
Subject: [PATCH] fix: remove  left and right white space on ios devices with
 notch

---
 src/assets/scss/_base.scss | 35 +++++++++++++++++++++++++++++++++++
 src/assets/scss/_slot.scss | 16 ++++++++++++++++
 src/index.pug              |  2 +-
 3 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/_base.scss b/src/assets/scss/_base.scss
index f6a9383..3e02258 100644
--- a/src/assets/scss/_base.scss
+++ b/src/assets/scss/_base.scss
@@ -46,6 +46,41 @@ body {
   @media #{$mobile} {
     padding: 0 5%;
   }
+
+  // Fixing the notch issue on iOS when using "viewport-fit=cover"
+  --safe-area-inset-top: 0px;
+  --safe-area-inset-right: 0px;
+  --safe-area-inset-bottom: 0px;
+  --safe-area-inset-left: 0px;
+
+  // Older iOS versions
+  @supports (top: constant(safe-area-inset-top)) {
+    --safe-area-inset-top: constant(safe-area-inset-top);
+    --safe-area-inset-right: constant(safe-area-inset-right);
+    --safe-area-inset-bottom: constant(safe-area-inset-bottom);
+    --safe-area-inset-left: constant(safe-area-inset-left);
+  }
+
+  @supports (top: env(safe-area-inset-top)) {
+    --safe-area-inset-top: env(safe-area-inset-top);
+    --safe-area-inset-right: env(safe-area-inset-right);
+    --safe-area-inset-bottom: env(safe-area-inset-bottom);
+    --safe-area-inset-left: env(safe-area-inset-left);
+  }
+
+  @supports (padding: unquote('max(0px)')) {
+    padding: 0
+      unquote(
+        'max(3.125rem, var(--safe-area-inset-right)) 0 max(3.125rem, var(--safe-area-inset-left))'
+      );
+
+    @media #{$mobile} {
+      padding: 0
+        unquote(
+          'max(5%, var(--safe-area-inset-right)) 0 max(5%, var(--safe-area-inset-left))'
+        );
+    }
+  }
 }
 
 .main {
diff --git a/src/assets/scss/_slot.scss b/src/assets/scss/_slot.scss
index c504343..396fcd7 100644
--- a/src/assets/scss/_slot.scss
+++ b/src/assets/scss/_slot.scss
@@ -34,6 +34,22 @@
   top: 1rem;
   right: 1rem;
 
+  // Fixing the notch issue on iOS when using "viewport-fit=cover"
+  --safe-area-inset-right: 0px;
+
+  // Older iOS versions
+  @supports (top: constant(safe-area-inset-top)) {
+    --safe-area-inset-right: constant(safe-area-inset-right);
+  }
+
+  @supports (top: env(safe-area-inset-top)) {
+    --safe-area-inset-right: env(safe-area-inset-right);
+  }
+
+  @supports (padding: unquote('max(0px)')) {
+    right: unquote('max(1rem, var(--safe-area-inset-right))');
+  }
+
   .icon-button {
     margin: 0 0 0 1.5rem;
   }
diff --git a/src/index.pug b/src/index.pug
index b625b73..45ecd9c 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -5,7 +5,7 @@ html(xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en")
     meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
     meta(name="language" content="English")
     meta(http-equiv="X-UA-Compatible" content="IE=edge")
-    meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no")
+    meta(name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover")
     meta(name="format-detection" content="telephone=no, date=no, address=no, email=no")
     meta(name="msapplication-tap-highlight" content="no")