feat: small size table

src/App.tsx

@@ -21,12 +21,12 @@ export const App = () => {
 
   return (
     <div
-      class="relative flex h-screen flex-col p-2 subpixel-antialiased"
+      class="relative flex h-screen flex-col subpixel-antialiased"
       data-theme={curTheme()}
     >
       <Header />
 
-      <div class="flex-1 overflow-y-auto py-4">
+      <div class="flex-1 overflow-y-auto p-4">
         <Routes>
           <Show when={selectedEndpoint()}>
             <Route path="/" component={Overview} />
@@ -41,7 +41,7 @@ export const App = () => {
         </Routes>
       </div>
 
-      <footer class="footer footer-center rounded-box hidden bg-base-200 p-2 text-base-content sm:block">
+      <footer class="footer footer-center hidden rounded bg-base-200 p-2 text-base-content sm:block">
         <a href="https://github.com/metacubex/metacubexd" target="_blank">
           metacubexd
         </a>

src/components/Header.tsx

@@ -9,60 +9,60 @@ import {
   IconRuler,
   IconSettings,
 } from '@tabler/icons-solidjs'
-import { For, Show } from 'solid-js'
+import { For, ParentComponent, Show } from 'solid-js'
 import { themes } from '~/constants'
 import { setCurTheme, setSelectedEndpoint } from '~/signals'
 
+const Nav: ParentComponent<{ href: string; tooltip: string }> = ({
+  href,
+  tooltip,
+  children,
+}) => (
+  <li>
+    <A
+      class="tooltiptooltip-bottom rounded-full"
+      href={href}
+      data-tip={tooltip}
+    >
+      {children}
+    </A>
+  </li>
+)
+
 export const Header = () => {
   const location = useLocation()
   const navigate = useNavigate()
 
   return (
-    <ul class="menu rounded-box menu-horizontal sticky left-0 top-0 z-10 flex items-center justify-center gap-2 bg-base-200 p-2">
+    <ul class="menu menu-horizontal sticky left-0 top-0 z-10 flex items-center justify-center gap-2 rounded-full bg-base-200 p-2">
       <Show when={location.pathname !== '/setup'}>
-        <li>
+        <Nav href="/" tooltip="Overview">
-          <A class="tooltip tooltip-bottom" href="/" data-tip="Home">
+          <IconHome />
-            <IconHome />
+        </Nav>
-          </A>
-        </li>
 
-        <li>
+        <Nav href="/proxies" tooltip="Proxies">
-          <A class="tooltip tooltip-bottom" href="/proxies" data-tip="Proxies">
+          <IconGlobe />
-            <IconGlobe />
+        </Nav>
-          </A>
-        </li>
 
-        <li>
+        <Nav href="/rules" tooltip="Rules">
-          <A class="tooltip tooltip-bottom" href="/rules" data-tip="Rules">
+          <IconRuler />
-            <IconRuler />
+        </Nav>
-          </A>
-        </li>
 
-        <li>
+        <Nav href="/conns" tooltip="Connections">
-          <A
+          <IconNetwork />
-            class="tooltip tooltip-bottom"
+        </Nav>
-            href="/conns"
-            data-tip="Connections"
-          >
-            <IconNetwork />
-          </A>
-        </li>
 
-        <li>
+        <Nav href="/logs" tooltip="Logs">
-          <A class="tooltip tooltip-bottom" href="/logs" data-tip="Logs">
+          <IconFileStack />
-            <IconFileStack />
+        </Nav>
-          </A>
-        </li>
 
-        <li>
+        <Nav href="/config" tooltip="Config">
-          <A class="tooltip tooltip-bottom" href="/config" data-tip="Config">
+          <IconSettings />
-            <IconSettings />
+        </Nav>
-          </A>
-        </li>
 
         <li>
           <button
-            class="tooltip tooltip-bottom"
+            class="tooltip tooltip-bottom rounded-full"
             data-tip="Switch Endpoint"
             onClick={() => {
               setSelectedEndpoint('')
@@ -79,7 +79,10 @@ export const Header = () => {
         <input id="themes" type="checkbox" class="drawer-toggle" />
 
         <div class="drawer-content flex items-center">
-          <label for="themes" class="btn btn-primary drawer-button btn-sm">
+          <label
+            for="themes"
+            class="btn btn-circle btn-primary drawer-button btn-sm"
+          >
             <IconPalette />
           </label>
         </div>

src/pages/Connections.tsx

@@ -164,7 +164,7 @@ export const Connections = () => {
       />
 
       <div class="overflow-x-auto whitespace-nowrap">
-        <table class="table">
+        <table class="table table-xs">
           <thead>
             <For each={table.getHeaderGroups()}>
               {(headerGroup) => (
@@ -202,7 +202,7 @@ export const Connections = () => {
           <tbody>
             <For each={table.getRowModel().rows}>
               {(row) => (
-                <tr>
+                <tr class="hover">
                   <For each={row.getVisibleCells()}>
                     {(cell) => (
                       <td>