feat: add safe area paddings

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" />

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",

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:
       {

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 />

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