From 6af16272fd407ce399a92d75fb569f0426e2d495 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Tue, 5 Mar 2024 21:34:36 -0300
Subject: [PATCH] Add ShadTooltip component and update styling in
 exampleComponent and MainPage

---
 .../src/components/exampleComponent/index.tsx | 40 ++++++++++---------
 src/frontend/src/pages/MainPage/index.tsx     |  2 +-
 2 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/src/frontend/src/components/exampleComponent/index.tsx b/src/frontend/src/components/exampleComponent/index.tsx
index fdaa36766..fb6d570aa 100644
--- a/src/frontend/src/components/exampleComponent/index.tsx
+++ b/src/frontend/src/components/exampleComponent/index.tsx
@@ -53,7 +53,9 @@ export default function CollectionCardComponent({
                         </CardTitle>
                     </div>
                     <CardDescription className="pb-2 pt-2">
-                        <div className="truncate-doubleline">{flow.description}</div>
+                        <ShadTooltip side="bottom" styleClasses="z-50" content={flow.description}>
+                            <div className="truncate-doubleline">{flow.description}</div>
+                        </ShadTooltip>
                     </CardDescription>
                 </CardHeader>
             </div>
@@ -61,25 +63,25 @@ export default function CollectionCardComponent({
             <CardFooter>
                 <div className="flex w-full items-center justify-between gap-2">
                     <div className="flex w-full justify-end flex-wrap gap-2">
-                            <Button
-                                onClick={() => {
-                                    updateIds(flow.data!)
-                                    addFlow(true, flow).then((id) => {
+                        <Button
+                            onClick={() => {
+                                updateIds(flow.data!)
+                                addFlow(true, flow).then((id) => {
 
-                                        navigate("/flow/" + id);
-                                    });
-                                }}
-                                tabIndex={-1}
-                                variant="outline"
-                                size="sm"
-                                className="whitespace-nowrap "
-                            >
-                                <IconComponent
-                                    name="ExternalLink"
-                                    className="main-page-nav-button select-none"
-                                />
-                                Select Flow
-                            </Button>
+                                    navigate("/flow/" + id);
+                                });
+                            }}
+                            tabIndex={-1}
+                            variant="outline"
+                            size="sm"
+                            className="whitespace-nowrap "
+                        >
+                            <IconComponent
+                                name="ExternalLink"
+                                className="main-page-nav-button select-none"
+                            />
+                            Select Flow
+                        </Button>
                     </div>
                 </div>
             </CardFooter>
diff --git a/src/frontend/src/pages/MainPage/index.tsx b/src/frontend/src/pages/MainPage/index.tsx
index 9b35681eb..2574f03af 100644
--- a/src/frontend/src/pages/MainPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/index.tsx
@@ -128,7 +128,7 @@ export default function HomePage(): JSX.Element {
           />
         </BaseModal.Header>
         <BaseModal.Content>
-          <div className="flex flex-wrap w-full h-full p-4 gap-3">
+          <div className="flex flex-wrap w-full h-full p-4 gap-3 overflow-auto custom-scroll">
             {examples.map((example, idx) => {
               return( 
               <ExampleCardComponent key={idx} flow={example} />)