Footer fix

web/src/App.tsx

@@ -66,12 +66,11 @@ export function App() {
     return () => clearInterval(id);
   }, []);
 
-  const cat = CATEGORIES.find((c) => c.id === category)!;
   const open = docs.find((d) => d.name === openDoc);
 
   return (
     <div class="min-h-screen flex flex-col">
-      {/* Desktop: tab row, left-aligned; mobile: compact title bar */}
+      {/* Desktop only: tab row top-left */}
       <div class="bg-base-200 px-4 py-2 hidden md:block">
         <div class="max-w-4xl mx-auto flex items-center gap-2">
           <span class="text-lg font-bold mr-4">Homelab</span>
@@ -88,11 +87,8 @@ export function App() {
           ))}
         </div>
       </div>
-      <div class="navbar bg-base-200 px-4 py-3 md:hidden">
-        <span class="text-lg font-bold mx-auto">{cat.label}</span>
-      </div>
 
-      <div class="flex-1 w-full max-w-md mx-auto px-4 pb-20 md:pb-6 pt-[env(safe-area-inset-top)]">
+      <div class="flex-1 w-full max-w-md mx-auto px-4 pb-24 md:pb-6 pt-[env(safe-area-inset-top)]">
         {category === "links" && <LinkList links={content.links} />}
         {category === "monitor" && (
           <div class="flex flex-col gap-3 mt-4">
@@ -108,12 +104,12 @@ export function App() {
           ))}
       </div>
 
-      {/* Mobile footer nav: equal quarters, large icons */}
+      {/* Mobile footer nav: daisyUI dock (v5 btm-nav removed), equal quarters */}
-      <div class="btm-nav md:hidden bg-base-200 pb-[env(safe-area-inset-bottom)] z-10 h-20">
+      <div class="dock md:hidden">
         {CATEGORIES.map((c) => (
-          <button class={`flex-1 ${c.id === category ? "active text-primary" : "text-base-content/60"}`} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
+          <button class={c.id === category ? "dock-active text-primary" : "text-base-content/60"} onClick={() => { setCategory(c.id); setOpenDoc(null); }}>
-            <c.icon size={28} />
+            <c.icon size={26} />
-            <span class="text-xs font-medium">{c.label}</span>
+            <span class="dock-label text-xs">{c.label}</span>
           </button>
         ))}
       </div>