chore: dialog content is scrollable with image

plura-ai · Dec 7, 2024 · b50c945 · b50c945
1 parent cb3fa83
commit b50c945
Showing 1 changed file with 48 additions and 44 deletions.
diff --git a/apps/www/components/custom/features/feature.card.tsx b/apps/www/components/custom/features/feature.card.tsx
@@ -73,50 +73,54 @@ const FeatureCard: React.FC<CardProps & { rowSpan?: boolean }> = ({
 
       <DialogContainer>
         <DialogContent className="pointer-events-auto relative flex h-auto w-full flex-col overflow-hidden border border-zinc-950/10 bg-white dark:border-zinc-50/10 dark:bg-zinc-900 sm:w-[500px] rounded-2xl">
-          <DialogImage
-            src="/images/usagehome.jpg"
-            alt="A desk lamp designed by Edouard Wilfrid Buquet in 1925. It features a double-arm design and is made from nickel-plated brass, aluminium and varnished wood."
-            className="h-full w-full"
-          />
-          <div className="p-6">
-            <DialogTitle className="text-2xl text-zinc-950 dark:text-zinc-50">
-              EB27
-            </DialogTitle>
-            <DialogSubtitle className="text-zinc-700 dark:text-zinc-400">
-              Edouard Wilfrid Buquet
-            </DialogSubtitle>
-            <DialogDescription
-              disableLayoutAnimation
-              variants={{
-                initial: { opacity: 0, scale: 0.8, y: 100 },
-                animate: { opacity: 1, scale: 1, y: 0 },
-                exit: { opacity: 0, scale: 0.8, y: 100 },
-              }}
-              className=""
-            >
-              <ScrollArea className="h-[200px]">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
-                labore dolorem a quae eum, minima eligendi natus deserunt
-                repellat? Labore ex quia illum voluptatibus exercitationem sunt
-                doloribus, fuga soluta hic qui eos, tempore asperiores placeat
-                ab corrupti eum rerum recusandae molestiae et molestias nam
-                magnam! Exercitationem facere neque dolores est! Lorem ipsum
-                dolor sit amet consectetur adipisicing elit. Blanditiis eveniet
-                necessitatibus beatae, odio eligendi dignissimos repellat
-                sapiente ipsa illum quidem pariatur, dolore sed nobis obcaecati.
-                Accusantium molestias corporis assumenda ullam voluptatibus
-                praesentium, ab dolorem quam hic eius doloribus libero aperiam
-                repellendus, dolore asperiores culpa ex similique tenetur error?
-                Maiores quasi iste recusandae! Alias similique sunt deleniti,
-                quaerat obcaecati itaque ex iste qui provident molestias natus
-                inventore explicabo tempore. Dolores aut obcaecati consectetur
-                repellat quaerat neque officiis autem voluptatem illum
-                recusandae adipisci in, beatae unde eum dignissimos? Facilis at
-                eaque quam nobis qui rerum libero cum tenetur. Officiis
-                temporibus blanditiis ullam?
-              </ScrollArea>
-            </DialogDescription>
-          </div>
+          <ScrollArea className="h-[600px]">
+            <DialogImage
+              src="/images/usagehome.jpg"
+              alt="A desk lamp designed by Edouard Wilfrid Buquet in 1925. It features a double-arm design and is made from nickel-plated brass, aluminium and varnished wood."
+              className="h-full w-full"
+            />
+            <div className="p-6">
+              <DialogTitle className="text-2xl text-zinc-950 dark:text-zinc-50">
+                EB27
+              </DialogTitle>
+              <DialogSubtitle className="text-zinc-700 dark:text-zinc-400">
+                Edouard Wilfrid Buquet
+              </DialogSubtitle>
+              <DialogDescription
+                disableLayoutAnimation
+                variants={{
+                  initial: { opacity: 0, scale: 0.8, y: 100 },
+                  animate: { opacity: 1, scale: 1, y: 0 },
+                  exit: { opacity: 0, scale: 0.8, y: 100 },
+                }}
+                className=""
+              >
+                <p>
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut
+                  labore dolorem a quae eum, minima eligendi natus deserunt
+                  repellat? Labore ex quia illum voluptatibus exercitationem
+                  sunt doloribus, fuga soluta hic qui eos, tempore asperiores
+                  placeat ab corrupti eum rerum recusandae molestiae et
+                  molestias nam magnam! Exercitationem facere neque dolores est!
+                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
+                  Blanditiis eveniet necessitatibus beatae, odio eligendi
+                  dignissimos repellat sapiente ipsa illum quidem pariatur,
+                  dolore sed nobis obcaecati. Accusantium molestias corporis
+                  assumenda ullam voluptatibus praesentium, ab dolorem quam hic
+                  eius doloribus libero aperiam repellendus, dolore asperiores
+                  culpa ex similique tenetur error? Maiores quasi iste
+                  recusandae! Alias similique sunt deleniti, quaerat obcaecati
+                  itaque ex iste qui provident molestias natus inventore
+                  explicabo tempore. Dolores aut obcaecati consectetur repellat
+                  quaerat neque officiis autem voluptatem illum recusandae
+                  adipisci in, beatae unde eum dignissimos? Facilis at eaque
+                  quam nobis qui rerum libero cum tenetur. Officiis temporibus
+                  blanditiis ullam?
+                </p>
+              </DialogDescription>
+            </div>
+          </ScrollArea>
+
           <DialogClose className="text-zinc-50" />
         </DialogContent>
       </DialogContainer>