fix: truncate text on filter to x icon fits the parent div (#3941)

🔧 (index.tsx): improve layout of sidebarFilterComponent to display type in a more readable way
langflow-ai · Sep 26, 2024 · 232b0d7 · 232b0d7
1 parent 11d0f44
commit 232b0d7
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/...tend/src/pages/FlowPage/components/extraSidebarComponent/sidebarFilterComponent/index.tsx b/...tend/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