feat: add safe area paddings

MetaCubeX · Sep 4, 2023 · 9840141 · 9840141
1 parent f0fbe09
commit 9840141
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
diff --git 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
@@ -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