From bc306faa2c2262e2ae8681eb54622a8c53559545 Mon Sep 17 00:00:00 2001
From: SOUMITRA-SAHA <soumitrosahaofficial@gmail.com>
Date: Tue, 3 Sep 2024 14:17:29 +0530
Subject: [PATCH] fix(core): handle text overflow styles for search box (#8054)

---
 .../components/app-sidebar/quick-search-input/index.css.ts  | 6 ++++++
 .../src/components/app-sidebar/quick-search-input/index.tsx | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts
index 13b2547f40..a94fea8fa4 100644
--- a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts
+++ b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.css.ts
@@ -15,6 +15,7 @@ export const root = style({
   padding: '0 12px',
   position: 'relative',
   whiteSpace: 'nowrap',
+  overflow: 'hidden',
 });
 export const icon = style({
   marginRight: '8px',
@@ -28,3 +29,8 @@ export const shortcutHint = style({
   color: cssVarV2('text/tertiary'),
   fontSize: cssVar('fontBase'),
 });
+export const quickSearchBarEllipsisStyle = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
diff --git a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
index 9c0f2cc774..be5488c628 100644
--- a/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
+++ b/packages/frontend/core/src/components/app-sidebar/quick-search-input/index.tsx
@@ -22,7 +22,9 @@ export function QuickSearchInput({ onClick, ...props }: QuickSearchInputProps) {
       onClick={onClick}
     >
       <SearchIcon className={styles.icon} />
-      {t['Quick search']()}
+      <span className={styles.quickSearchBarEllipsisStyle}>
+        {t['Quick search']()}
+      </span>
       <div className={styles.spacer} />
       <div className={styles.shortcutHint}>
         {isMac ? ' ⌘ + K' : ' Ctrl + K'}