fix design bug footer cart + header notif

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="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">
+      <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>
                     )}

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>

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