Fixed file name truncation

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">
+        <CardTitle className="flex w-full items-center gap-4">
-          <div className="flex gap-4 items-center">
             <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>
+            <span className="flex-1 w-full inline-block truncate-doubleline break-words">{flow.name}</span>
-          </div>
           {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>
           )}

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>