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

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

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>
+          <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>
+
             <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} />} />
+              <ProtectedResources />
             </Show>
-
-            <Route path={endpoint() ? ROUTES.Setup : '*'} component={Setup} />
-          </Routes>
-
-          <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: {

typings/index.d.ts

@@ -1 +0,0 @@
-declare module 'tailwindcss-safe-area'