fixed NavButtom

app/components/BottomNav.js

@@ -39,27 +39,66 @@ export default function BottomNav({ isOwner, isOwnerOrAgent }) {
   };
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
+    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center px-4 pb-3 pt-4 pointer-events-none">
-      <nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
+      <nav
-        <div className="flex items-center justify-center gap-1">
+        className="
+      w-fit max-w-full
+      rounded-3xl
+      bg-gray-50
+      px-2 py-2 sm:px-3
+      shadow-[0_4px_24px_rgba(251,146,60,0.25)]
+      pointer-events-auto
+    "
+      >
+        <div className="flex  items-center justify-center  gap-0.5 sm:gap-1   overflow-hidden ">
           {items.map((it) => {
             const Icon = it.icon;
             const active = isActive(it.href);
+
             return (
               <Link
                 key={it.href}
                 href={it.href}
-                className={`relative flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-200 ease-out hover:shadow-md hover:bg-white/80 ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
+                className={`
+              relative
+              flex
+              min-w-[58px] sm:min-w-[0px]
+              flex-col
+              items-center
+              justify-center
+              rounded-xl
+              px-2 py-1.5
+              sm:px-1 sm:py-4
+              transition-all
+              duration-200
+              ease-out
+              align-middle
+
+              ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:bg-white/80 hover:text-amber-600 hover:shadow-md"}
+            `}
               >
                 <div className="relative">
-                  <Icon className="w-6 h-6" />
+                  <Icon className="h-5 w-5 sm:h-6 sm:w-6" />
+
                   {it.badge > 0 && (
-                    <div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">{it.badge > 9 ? "9+" : it.badge}</div>
+                    <div
+                      className="
+                  absolute -right-2 -top-2
+                  flex h-6 w-7 sm:h-5 sm:w-5
+                  items-center justify-center
+                  rounded-full
+                  bg-red-500
+                  text-[9px] sm:text-xs
+                  font-bold
+                  text-white
+                "
+                    >
+                      {it.badge > 9 ? "9+" : it.badge}
+                    </div>
                   )}
                 </div>
-                <div className="mt-1 text-xs text-center" aria-hidden>
+
-                  {it.label}
+                <div className="mt-0.5 text-[10px] sm:mt-1 sm:text-xs">{it.label}</div>
-                </div>
               </Link>
             );
           })}