From 91b983a00a1c4f5916ea9e47b48ab86c6938aa6d Mon Sep 17 00:00:00 2001
From: Deon Sanchez <69873175+deon-sanchez@users.noreply.github.com>
Date: Tue, 24 Jun 2025 12:01:03 -0600
Subject: [PATCH] fix: flows title on dashboard are truncating too soon (#8696)

* fix: Adjust header component styles for improved layout consistency

* fix: Update ListComponent styles for improved layout and readability
---
 .../src/pages/MainPage/components/header/index.tsx     |  2 +-
 .../src/pages/MainPage/components/list/index.tsx       | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/frontend/src/pages/MainPage/components/header/index.tsx b/src/frontend/src/pages/MainPage/components/header/index.tsx
index c6023c736..11e3225ff 100644
--- a/src/frontend/src/pages/MainPage/components/header/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/header/index.tsx
@@ -191,7 +191,7 @@ const HeaderComponent = ({
               <div className="flex items-center">
                 <div
                   className={cn(
-                    "-mr-3 flex w-0 items-center gap-2 overflow-hidden opacity-0 transition-all duration-300",
+                    "flex w-0 items-center gap-2 overflow-hidden opacity-0 transition-all duration-300",
                     selectedFlows.length > 0 && "w-36 opacity-100",
                   )}
                 >
diff --git a/src/frontend/src/pages/MainPage/components/list/index.tsx b/src/frontend/src/pages/MainPage/components/list/index.tsx
index c85ae5b09..26770b473 100644
--- a/src/frontend/src/pages/MainPage/components/list/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/list/index.tsx
@@ -156,9 +156,9 @@ const ListComponent = ({
           </div>
 
           <div className="flex min-w-0 flex-col justify-start">
-            <div className="line-clamp-1 flex min-w-0 items-baseline truncate max-md:flex-col">
+            <div className="flex min-w-0 flex-wrap items-baseline gap-x-2 gap-y-1">
               <div
-                className="flex truncate pr-2 text-sm font-semibold max-md:w-full"
+                className="flex min-w-0 flex-shrink truncate text-sm font-semibold"
                 data-testid={`flow-name-div`}
               >
                 <span
@@ -168,8 +168,10 @@ const ListComponent = ({
                   {flowData.name}
                 </span>
               </div>
-              <div className="item-baseline flex text-xs text-muted-foreground">
-                Edited {timeElapsed(flowData.updated_at)} ago
+              <div className="flex min-w-0 flex-shrink text-xs text-muted-foreground">
+                <span className="truncate">
+                  Edited {timeElapsed(flowData.updated_at)} ago
+                </span>
               </div>
             </div>
           </div>