From 9840141bce39188094db12373d8c358da771ffd1 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Tue, 5 Sep 2023 02:12:10 +0800
Subject: [PATCH] feat: add safe area paddings

---
 index.html         |  2 +-
 package.json       |  1 +
 pnpm-lock.yaml     | 11 +++++++++++
 src/App.tsx        |  2 +-
 tailwind.config.ts |  5 ++++-
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index e94ac687..faf3eb15 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/svg" href="/src/assets/favicon.svg" />
diff --git a/package.json b/package.json
index 3d1b83ba..4a803a49 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "sort-package-json": "^2.5.1",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-safe-area": "^0.4.0",
     "typescript": "^5.2.2",
     "uuid": "^9.0.0",
     "vite": "^4.4.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9deecc8f..1f0c9028 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -143,6 +143,9 @@ dependencies:
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3(ts-node@10.9.1)
+  tailwindcss-safe-area:
+    specifier: ^0.4.0
+    version: 0.4.0
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
@@ -7557,6 +7560,14 @@ packages:
       }
     dev: false
 
+  /tailwindcss-safe-area@0.4.0:
+    resolution:
+      {
+        integrity: sha512-V6UFT+LCYJOg9780fcQwA4k0RDCmyjRab7G8fwdeoasT9NOCpmXdCV1q79PSI9AK/KtimTIzGeQfeRH583lH5A==,
+      }
+    engines: { node: '>=16' }
+    dev: false
+
   /tailwindcss@3.3.3(ts-node@10.9.1):
     resolution:
       {
diff --git a/src/App.tsx b/src/App.tsx
index 97beb039..6baccd35 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -39,7 +39,7 @@ export const App = () => {
 
   return (
     <div
-      class="relative flex h-screen flex-col subpixel-antialiased"
+      class="relative flex h-screen flex-col subpixel-antialiased p-safe"
       data-theme={curTheme()}
     >
       <Header />
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 29b9d50f..b0d31912 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,8 +1,11 @@
 import daisyui from 'daisyui'
 import { Config } from 'tailwindcss'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import safeArea from 'tailwindcss-safe-area'
 
 export default {
   content: ['./src/**/*.{css,tsx}'],
-  plugins: [daisyui],
+  plugins: [daisyui, safeArea],
   daisyui: { themes: true },
 } as Config