From 232b0d7d0088b14382e502297da0664d2f3fbf2f Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 26 Sep 2024 17:52:38 -0300
Subject: [PATCH] fix: truncate text on filter to x icon fits the parent div
 (#3941)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 (index.tsx): improve layout of sidebarFilterComponent to display type in a more readable way
---
 .../extraSidebarComponent/sidebarFilterComponent/index.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
index 7b1dcbb69..3193b2c84 100644
--- a/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx
@@ -18,8 +18,11 @@ export function SidebarFilterComponent({
           name="ListFilter"
           className="h-4 w-4 shrink-0 stroke-2"
         />
-        <div className="flex-1 overflow-hidden truncate">
-          {isInput ? "Input" : "Output"}: {type}
+        <div className="flex flex-1">
+          {isInput ? "Input" : "Output"}:{" "}
+          <div className="w-[5.7rem] flex-1 overflow-hidden truncate pl-1">
+            {type}
+          </div>
         </div>
       </div>
       <ShadTooltip