check-fix bottom sheet

src/components/navigation/BottomNavBar.tsx

@@ -33,15 +33,14 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
   }, [items]);
 
   return (
-    <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">
+    <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">
         <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
@@ -51,18 +50,17 @@ function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
           </g>
 
           {/* 🔽 Your HTML content inside SVG */}
-          <foreignObject x="0" y="0" width="100%" height="100%" style={{ overflow: 'visible' }}>
+          <foreignObject x="0" y="10" width="100%" height="80">
             <nav
-              className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end relative pt-[10px] pb-[14px]"
-              style={{ overflow: 'visible' }}
+              className="h-full px-4 grid grid-cols-5 gap-x-1 text-[10px] items-end overflow-hidden"
             >
               <BottomNavLink
                 href={`/${name}/cart`}
                 icon={
-                  <div className="relative" style={{ overflow: 'visible' }}>
+                  <div className="relative flex-shrink-0">
                     <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 z-10 pointer-events-none">
+                      <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">
                         {cartItemsCount > 99 ? '99+' : cartItemsCount}
                       </span>
                     )}

src/components/navigation/BottomNavLink.tsx

@@ -17,13 +17,15 @@ function BottomNavLink({ icon, value, href, ...restProps }: Props) {
 
   return (
     <Link {...restProps} href={href} className={clsx(
-      'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500',
+      'flex flex-col justify-arround items-center gap-[5px] text-disabled2 pointer-events-auto dark:**:stroke-neutral-500 min-w-0',
       isActive && 'text-foreground **:stroke-foreground',
-       restProps.className ?? '',
+      restProps.className ?? '',
     )}>
-      {icon}
+      <div className="flex-shrink-0">
+        {icon}
+      </div>
       <span className={clsx(
-        'text-xs2 text-disabled-text',
+        'text-xs2 text-disabled-text text-center truncate w-full',
         isActive && 'text-foreground'
       )}>
         {value}