six bug

blocks/feature168.tsx

@@ -36,15 +36,21 @@ interface Feature168Props {
 
 const Feature168 = ({ className }: Feature168Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-full overflow-x-hidden py-32", className)}
+    >
       <div className="border-y">
-        <div className="container flex flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
+        <div className="container flex min-w-0 w-full flex-col gap-6 border-x py-4 max-lg:border-x lg:py-8">
           <Badge
             variant="outline"
-            className="w-fit gap-1 bg-card px-3 text-sm font-normal tracking-tight shadow-sm"
+            className="h-auto max-w-full shrink gap-1 bg-card px-3 py-1.5 text-sm font-normal tracking-tight whitespace-normal text-pretty shadow-sm"
           >
-            <PocketKnife className="size-4" />
-            <span>گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.</span>
+            <PocketKnife className="size-4 shrink-0" />
+            <span className="min-w-0">
+              گزارش‌های یکپارچه نشان می‌دهد کدام بخش بیشترین تأثیر را روی سودآوری دارد.
+            </span>
           </Badge>
           <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
             عملیات سازمان را یکپارچه کنید
@@ -54,15 +60,15 @@ const Feature168 = ({ className }: Feature168Props) => {
           </p>
         </div>
       </div>
-      <div className="container border-x lg:px-0!">
-        <div className="items-center">
-          <div className="grid flex-1 bg-border max-lg:divide-y max-lg:border-x lg:grid-cols-3 lg:gap-px">
+      <div className="container min-w-0 w-full border-x lg:px-0!">
+        <div className="min-w-0 items-center">
+          <div className="grid min-w-0 flex-1 bg-border max-lg:divide-y max-lg:border-x lg:grid-cols-3 lg:gap-px">
             {DATA.map((item) => (
               <div
                 key={item.title}
-                className="relative isolate flex flex-col bg-background pt-5 text-start lg:pt-20"
+                className="relative isolate flex min-w-0 flex-col bg-background pt-5 text-start lg:pt-20"
               >
-                <div className="flex-1 border-b border-border">
+                <div className="min-w-0 flex-1 border-b border-border">
                   <h3 className="mt-2 px-4 text-lg font-semibold tracking-tight lg:px-8">
                     {item.title}
                   </h3>
@@ -70,11 +76,11 @@ const Feature168 = ({ className }: Feature168Props) => {
                     {item.description}
                   </p>
                 </div>
-                <div className="bg-muted">
+                <div className="min-w-0 overflow-hidden bg-muted">
                   <img
                     src={item.image}
                     alt={item.imageAlt}
-                    className="p-12 dark:invert"
+                    className="h-auto w-full max-w-full p-6 sm:p-8 lg:p-12 dark:invert"
                   />
                 </div>
               </div>