From 3568c9993c21da4db1883a5ba5ba3a2c4a06be1c Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 15 Jun 2023 10:54:02 -0300
Subject: [PATCH] Fixed file name truncation

---
 src/frontend/src/components/cardComponent/index.tsx       | 8 +++-----
 .../headerComponent/components/menuBar/index.tsx          | 5 ++++-
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 82a0fb88f..20c52889e 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -28,18 +28,16 @@ export const CardComponent = ({
   return (
     <Card className="group">
       <CardHeader>
-        <CardTitle className="flex justify-between items-start">
-          <div className="flex gap-4 items-center">
+        <CardTitle className="flex w-full items-center gap-4">
             <span
               className={
                 "rounded-full w-7 h-7 flex items-center justify-center text-2xl " +
                 gradients[parseInt(flow.id.slice(0, 6), 30) % gradients.length]
               }
             ></span>
-            <span className="flex-1 truncate-doubleline">{flow.name}</span>
-          </div>
+            <span className="flex-1 w-full inline-block truncate-doubleline break-words">{flow.name}</span>
           {onDelete && (
-            <button onClick={onDelete}>
+            <button className="flex self-start" onClick={onDelete}>
               <Trash2 className="w-4 h-4 text-primary opacity-0 group-hover:opacity-100 transition-all" />
             </button>
           )}
diff --git a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
index 21a0fc76f..a207f5a52 100644
--- a/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
+++ b/src/frontend/src/components/headerComponent/components/menuBar/index.tsx
@@ -50,8 +50,11 @@ export const MenuBar = ({ flows, tabId }) => {
       <div className="flex items-center font-medium text-sm rounded-md py-1 px-1.5 gap-0.5">
         <DropdownMenu>
           <DropdownMenuTrigger>
-            <Button className="gap-2 flex items-center" variant="primary" size="sm">
+            <Button className="gap-2 flex items-center max-w-[200px]" variant="primary" size="sm">
+              <div className="truncate flex-1">
+
               {current_flow.name}
+              </div>
               <ChevronDown className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>