From 26023ab244256f5fac5100756ac949db834ab0b2 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Wed, 1 Oct 2025 16:48:57 -0300
Subject: [PATCH] fix: truncate text on @ filter selector on chat (#133)

* Added truncation on name and description for knowledge filters

* fixed selected filter not truncating right
---
 frontend/src/app/chat/page.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/chat/page.tsx b/frontend/src/app/chat/page.tsx
index 5ae746bf..7c2a94bc 100644
--- a/frontend/src/app/chat/page.tsx
+++ b/frontend/src/app/chat/page.tsx
@@ -2344,12 +2344,14 @@ function ChatPage() {
                           <button
                             key={filter.id}
                             onClick={() => handleFilterSelect(filter)}
-                            className={`w-full text-left px-2 py-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
+                            className={`w-full overflow-hidden text-left px-2 py-2 gap-2 text-sm rounded hover:bg-muted/50 flex items-center justify-between ${
                               index === selectedFilterIndex ? "bg-muted/50" : ""
                             }`}
                           >
-                            <div>
-                              <div className="font-medium">{filter.name}</div>
+                            <div className="overflow-hidden">
+                              <div className="font-medium truncate">
+                                {filter.name}
+                              </div>
                               {filter.description && (
                                 <div className="text-xs text-muted-foreground truncate">
                                   {filter.description}
@@ -2357,7 +2359,7 @@ function ChatPage() {
                               )}
                             </div>
                             {selectedFilter?.id === filter.id && (
-                              <div className="w-2 h-2 rounded-full bg-blue-500" />
+                              <div className="w-2 h-2 shrink-0 rounded-full bg-blue-500" />
                             )}
                           </button>
                         ))}