From 3309f3bed118d7e682f8842ed82adbc645d037b9 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 14 Dec 2025 14:27:10 +0330
Subject: [PATCH] fix design bug footer cart + header notif

---
 src/components/navigation/BottomNavBar.tsx    | 14 ++++++++------
 src/components/topbar/TopBar.tsx              |  2 +-
 src/features/providers/ReactQueryProvider.tsx |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation/BottomNavBar.tsx b/src/components/navigation/BottomNavBar.tsx
index bad394f..eee3aae 100644
--- a/src/components/navigation/BottomNavBar.tsx
+++ b/src/components/navigation/BottomNavBar.tsx
@@ -33,14 +33,15 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   }, [items]);
 
   return (
-    <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
-      <div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30">
+    <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none overflow-visible">
+      <div className="max-w-md mx-auto w-full aspect-[436/104] relative z-30 overflow-visible">
         <svg
           viewBox="0 0 436 104"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
           className="w-full h-full block"
           preserveAspectRatio="xMidYMid meet"
+          style={{ overflow: 'visible' }}
         >
           <g filter="url(#filter0_d_9095_18036)" className='fill-container'>
             <path
@@ -50,17 +51,18 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
           </g>
 
           {/* 🔽 Your HTML content inside SVG */}
-          <foreignObject x="0" y="10" width="100%" height="80">
+          <foreignObject x="0" y="0" width="100%" height="100%" style={{ overflow: 'visible' }}>
             <nav
-              className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
+              className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end relative pt-[10px] pb-[14px]"
+              style={{ overflow: 'visible' }}
             >
               <BottomNavLink
                 href={`/${name}/cart`}
                 icon={
-                  <div className="relative">
+                  <div className="relative" style={{ overflow: 'visible' }}>
                     <BagIcon width={20} height={20} />
                     {cartItemsCount > 0 && (
-                      <span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full">
+                      <span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full z-10 pointer-events-none">
                         {cartItemsCount > 99 ? '99+' : cartItemsCount}
                       </span>
                     )}
diff --git a/src/components/topbar/TopBar.tsx b/src/components/topbar/TopBar.tsx
index a133989..f6c3fcc 100644
--- a/src/components/topbar/TopBar.tsx
+++ b/src/components/topbar/TopBar.tsx
@@ -69,7 +69,7 @@ function TopBar({ profileDropState, toggleProfileDropState, toggleMenuState }: P
                         href={`/${name}/notifications`}
                         className='relative'>
                         <NotificationBellIcon className='size-4.5 text-icon-active dark:text-foreground' />
-                        <span className='absolute -right-1 -top-1 bg-red-500 size-3 rounded-full text-[8px] text-container'>
+                        <span className='absolute -right-1 -top-1 flex items-center justify-center bg-red-500 size-3 rounded-full text-[8px] text-container'>
                             <div className='mt-0.25 place-self-center'>2</div>
                         </span>
                     </Link>
diff --git a/src/features/providers/ReactQueryProvider.tsx b/src/features/providers/ReactQueryProvider.tsx
index 82f24c3..9318dd7 100644
--- a/src/features/providers/ReactQueryProvider.tsx
+++ b/src/features/providers/ReactQueryProvider.tsx
@@ -10,7 +10,7 @@ export function ReactQueryProvider({ children }: { children: React.ReactNode })
   return (
     <QueryClientProvider client={queryClient}>
       {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
     </QueryClientProvider>
   )
 }