category box

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -112,7 +112,7 @@ const CategoryScroll = ({ categories, selectedCategory, onSelect, variant = "lar
         return (
           <Renderer key={item.id} className={clsx(isSelected && "bg-container!")} onClick={handleSelect(item.id)}>
             <CategoryImage src={item.avatarUrl || "/assets/images/food-image.png"} size={imageSize} alt="category image" tintWithPrimary={!usesColoredSvg} />
-            <span className="text-xs text-foreground text-center">{item.title}</span>
+            <span className="text-xs text-foreground text-center whitespace-nowrap">{item.title}</span>
           </Renderer>
         );
       })}

src/components/listview/CategoryItemRenderer.tsx

@@ -11,7 +11,7 @@ function CategoryItemRenderer({ children, ...rest }: Props) {
         <div className={`${rest.className} cursor-pointer transition-all duration-200 ease-out gradient-border overflow-hidden rounded-xl backdrop-blur-md bg-container/40`}>
             <div
                 {...rest}
-                className="rounded-normal w-[88px] h-[88px] flex flex-col justify-center items-center gap-2"
+                className="rounded-normal w-[108px] h-[88px] flex flex-col justify-center items-center gap-2"
             >
                 {children}
             </div>