fix(config): the bottom edge of the page gets cutoff, closes #385

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

src/App.tsx

@@ -47,31 +47,33 @@ 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()}
       >
         <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" />

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

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',
       )}

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