From 522be608a70d142e0805f14748c073c476d5f713 Mon Sep 17 00:00:00 2001
From: kunish <kunish.butt@gmail.com>
Date: Thu, 19 Oct 2023 23:54:57 +0800
Subject: [PATCH] fix(config): the bottom edge of the page gets cutoff, closes
 #385

---
 package.json                     |  1 -
 pnpm-lock.yaml                   | 18 ++---------------
 src/App.tsx                      | 34 +++++++++++++++++---------------
 src/components/Header.tsx        |  2 +-
 src/components/ProxyNodeCard.tsx |  2 +-
 tailwind.config.ts               |  3 +--
 typings/index.d.ts               |  1 -
 7 files changed, 23 insertions(+), 38 deletions(-)
 delete mode 100644 typings/index.d.ts

diff --git a/package.json b/package.json
index 6faadc50..d2c80821 100644
--- a/package.json
+++ b/package.json
@@ -66,7 +66,6 @@
     "sort-package-json": "^2.6.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
-    "tailwindcss-safe-area": "^0.4.1",
     "typescript": "^5.2.2",
     "uuid": "^9.0.1",
     "vite": "^4.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ccee05bd..f4578a47 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -161,9 +161,6 @@ dependencies:
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3(ts-node@10.9.1)
-  tailwindcss-safe-area:
-    specifier: ^0.4.1
-    version: 0.4.1
   typescript:
     specifier: ^5.2.2
     version: 5.2.2
@@ -2291,12 +2288,6 @@ packages:
     resolution: {integrity: sha512-4tT2UrL5LBqDwoed9wZ6N3umC4Yhz3W3FloMmiiG4JwmUJWpie0c7lcnUNd4gtMKuDEO4wRVS8B6Xa0uMRsMKg==}
     dev: false
 
-  /@types/node@20.8.6:
-    resolution: {integrity: sha512-eWO4K2Ji70QzKUqRy6oyJWUeB7+g2cRagT3T/nxYibYcT4y2BDL8lqolRXjTHmkZCdJfIPaY73KbJAZmcryxTQ==}
-    dependencies:
-      undici-types: 5.25.3
-    dev: false
-
   /@types/node@20.8.7:
     resolution: {integrity: sha512-21TKHHh3eUHIi2MloeptJWALuCu5H7HQTdTrWIFReA8ad+aggoX+lRes3ex7/FtpC+sVUpFMQ+QTfYr74mruiQ==}
     dependencies:
@@ -2310,7 +2301,7 @@ packages:
   /@types/resolve@1.17.1:
     resolution: {integrity: sha512-yy7HuzQhj0dhGpD8RLXSZWEkLsV9ibvxvi6EiJ3bkqLAO1RGo0WbkWQiwpRlSFymTJRz0d3k5LM3kkx8ArDbLw==}
     dependencies:
-      '@types/node': 20.8.6
+      '@types/node': 20.8.7
     dev: false
 
   /@types/semver@7.5.2:
@@ -4346,7 +4337,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 20.8.6
+      '@types/node': 20.8.7
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: false
@@ -5920,11 +5911,6 @@ packages:
     resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
     dev: false
 
-  /tailwindcss-safe-area@0.4.1:
-    resolution: {integrity: sha512-6EOe8D39F8N8poKWkeOcIt2SchyJ8CVfm/k5iZak6+QgOzii0TukNIfItdGbf7ylVtq3CF2CK/Oxo5xvtLwVmQ==}
-    engines: {node: '>=16'}
-    dev: false
-
   /tailwindcss@3.3.3(ts-node@10.9.1):
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
     engines: {node: '>=14.0.0'}
diff --git a/src/App.tsx b/src/App.tsx
index 9668ff69..89edb7cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -47,7 +47,7 @@ export const App = () => {
     <I18nProvider locale={locale()}>
       <div
         class={twMerge(
-          'relative flex h-screen flex-col overscroll-y-none subpixel-antialiased p-safe',
+          'relative flex h-screen flex-col overscroll-y-none subpixel-antialiased',
           useTwemoji() ? 'font-twemoji' : 'font-no-twemoji',
         )}
         data-theme={curTheme()}
@@ -55,23 +55,25 @@ export const App = () => {
         <Header />
 
         <div class="flex-1 overflow-y-auto p-2 sm:p-4">
-          <Routes>
-            <Show when={endpoint()}>
-              <Route path={ROUTES.Overview} component={Overview} />
-              <Route path={ROUTES.Proxies} component={Proxies} />
-              <Route path={ROUTES.Rules} component={Rules} />
-              <Route path={ROUTES.Conns} component={Connections} />
-              <Route path={ROUTES.Log} component={Logs} />
-              <Route path={ROUTES.Config} component={Config} />
-              <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
-            </Show>
+          <div class="pb-8">
+            <Routes>
+              <Show when={endpoint()}>
+                <Route path={ROUTES.Overview} component={Overview} />
+                <Route path={ROUTES.Proxies} component={Proxies} />
+                <Route path={ROUTES.Rules} component={Rules} />
+                <Route path={ROUTES.Conns} component={Connections} />
+                <Route path={ROUTES.Log} component={Logs} />
+                <Route path={ROUTES.Config} component={Config} />
+                <Route path="*" element={<Navigate href={ROUTES.Overview} />} />
+              </Show>
 
-            <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
-          </Routes>
+              <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
+            </Routes>
 
-          <Show when={endpoint()}>
-            <ProtectedResources />
-          </Show>
+            <Show when={endpoint()}>
+              <ProtectedResources />
+            </Show>
+          </div>
         </div>
 
         <Toaster position="bottom-center" />
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a607913d..5e8570ee 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -100,7 +100,7 @@ export const Header = () => {
   const [openedDrawer, setOpenedDrawer] = createSignal(false)
 
   return (
-    <ul class="navbar sticky inset-x-0 top-0 z-50 flex w-auto items-center justify-center bg-base-300 px-4 shadow-lg">
+    <ul class="navbar z-50 flex w-auto items-center justify-center bg-base-300 px-4 shadow-lg">
       <div class="navbar-start gap-4">
         <div class="drawer w-auto lg:hidden">
           <input
diff --git a/src/components/ProxyNodeCard.tsx b/src/components/ProxyNodeCard.tsx
index 277265fc..443eec3a 100644
--- a/src/components/ProxyNodeCard.tsx
+++ b/src/components/ProxyNodeCard.tsx
@@ -26,7 +26,7 @@ export const ProxyNodeCard = (props: {
   return (
     <div
       class={twMerge(
-        'card card-bordered tooltip-bottom flex flex-col gap-1 border-neutral-focus bg-neutral p-2 text-neutral-content shadow-lg',
+        'card card-bordered tooltip-bottom flex flex-col gap-1 border-neutral-focus bg-neutral p-2 text-neutral-content',
         isSelected && 'border-primary bg-primary-content text-primary',
         onClick && 'cursor-pointer',
       )}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d421f88a..761138c7 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,10 +1,9 @@
 import daisyui from 'daisyui'
 import { Config } from 'tailwindcss'
-import safeArea from 'tailwindcss-safe-area'
 
 export default {
   content: ['src/**/*.{css,ts,tsx}'],
-  plugins: [daisyui, safeArea],
+  plugins: [daisyui],
   daisyui: { themes: true },
   theme: {
     fontFamily: {
diff --git a/typings/index.d.ts b/typings/index.d.ts
deleted file mode 100644
index 10b507a1..00000000
--- a/typings/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'tailwindcss-safe-area'