six bug

blocks/feature213.tsx

@@ -1,4 +1,3 @@
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/lib/utils";
 
@@ -29,8 +28,7 @@ const LIST: TabItem[] = [
     id: "clear-audio",
     title: "Pivot تعاملی",
     value: "2",
-    summary:
-      "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
+    summary: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
     image: {
       src: "/block-media/shadcnblocks/block/placeholder-2.svg",
       alt: "تحلیل داده سازمان",
@@ -40,8 +38,7 @@ const LIST: TabItem[] = [
     id: "green-screen",
     title: "داشبورد مدیریتی",
     value: "3",
-    summary:
-      "داده سازمانی",
+    summary: "داده سازمانی",
     image: {
       src: "/block-media/shadcnblocks/block/placeholder-3.svg",
       alt: "داشبورد هوش تجاری",
@@ -55,53 +52,56 @@ interface Feature213Props {
 
 const Feature213 = ({ className }: Feature213Props) => {
   return (
-    <section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
-      <div className="container">
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("w-full max-w-full bg-background py-32", className)}
+    >
+      <div className="container min-w-0">
         <div className="mx-auto mb-8 flex max-w-[52.5rem] flex-col items-center justify-between gap-6 md:mb-20">
           <h2 className="text-center text-2xll tracking-tight text-balance text-foreground lg:text-2xll">
             تصمیم استراتژیک را داده‌محور کنید
           </h2>
         </div>
-        <div>
-          <Tabs
-            dir="rtl"
-            defaultValue={LIST[0].value}
-            className="flex gap-14 xl:!flex-row"
-          >
-            <TabsList className="!h-fit w-fit flex-col gap-2.5 bg-transparent p-0">
-              {LIST.map((item) => (
-                <TabsTrigger
-                  className="flex-col items-start rounded-[0.75rem] p-5 text-right whitespace-normal data-[state=active]:bg-muted xl:max-w-[34.0625rem]"
-                  key={item.id}
-                  value={item.value}
-                >
-                  <div className="leading-normal font-bold">{item.title}</div>
-                  <div className="leading-normal text-pretty text-muted-foreground">
-                    {item.summary}
-                  </div>
-                </TabsTrigger>
-              ))}
-            </TabsList>
+
+        <Tabs
+          dir="rtl"
+          defaultValue={LIST[0].value}
+          className="flex w-full min-w-0 flex-col items-stretch gap-8 lg:flex-row! lg:items-start lg:gap-14"
+        >
+          <TabsList className="!h-fit w-full shrink-0 flex-col gap-2.5 bg-transparent p-0 lg:w-fit lg:max-w-[34.0625rem]">
             {LIST.map((item) => (
-              <TabsContent
-                className="w-full"
+              <TabsTrigger
+                className="w-full flex-col items-start rounded-[0.75rem] p-5 text-right whitespace-normal data-[state=active]:bg-muted"
                 key={item.id}
                 value={item.value}
               >
-                <AspectRatio
-                  ratio={16 / 9}
-                  className="overflow-hidden rounded-[0.75rem]"
-                >
+                <div className="leading-normal font-bold">{item.title}</div>
+                <div className="leading-normal text-pretty text-muted-foreground">
+                  {item.summary}
+                </div>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <div className="relative min-w-0 w-full flex-1">
+            {LIST.map((item) => (
+              <TabsContent
+                className="mt-0 w-full min-w-0"
+                key={item.id}
+                value={item.value}
+              >
+                <div className="aspect-video w-full min-w-0 overflow-hidden rounded-[0.75rem] bg-muted">
                   <img
                     src={item.image.src}
                     alt={item.image.alt}
-                    className="block size-full object-cover object-center"
+                    className="block size-full max-w-full object-cover object-center"
                   />
-                </AspectRatio>
+                </div>
               </TabsContent>
             ))}
-          </Tabs>
-        </div>
+          </div>
+        </Tabs>
       </div>
     </section>
   );