fix overflow scroll

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

@@ -84,7 +84,7 @@ const CategoryScroll = ({
               height={imageSize}
               alt="category image"
             />
-            <span className="text-xs text-foreground">{item.title}</span>
+            <span className="text-xs text-foreground text-center">{item.title}</span>
           </Renderer>
         );
       })}

src/components/listview/MenuItem.tsx

@@ -106,14 +106,14 @@ const MenuItem = ({ food }: MenuItemProps) => {
           alt={foodName}
         />
       </Link>
-      <div className="w-full inline-flex flex-col justify-between">
+      <div className="w-full inline-flex flex-col justify-between min-w-0">
-        <Link href={foodDetailUrl} className="cursor-pointer">
+        <Link href={foodDetailUrl} className="cursor-pointer min-w-0">
-          <div>
+          <div className="min-w-0">
-            <div className="text-sm2 font-normal text-black dark:text-white">
+            <div className="text-sm2 font-normal text-black dark:text-white wrap-break-word">
               {foodName}
             </div>
             {(foodContent || foodDescription) && (
-              <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2">
+              <div className="text-[#7F7F7F] line-clamp-2 text-xs leading-5 font-normal mt-2 wrap-break-word overflow-hidden">
                 {foodContent || foodDescription}
               </div>
             )}
@@ -131,7 +131,7 @@ const MenuItem = ({ food }: MenuItemProps) => {
                 </span>
               </>
             ) : (
-              <span className="text-sm mt-1">
+              <span className="text-sm mt-1 text-right">
                 {formattedPrice} T
               </span>
             )}