fix(core): handle text overflow styles for search box (#8054)

toeverything · Sep 3, 2024 · bc306fa · bc306fa
1 parent bd8c844
commit bc306fa
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 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
@@ -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
@@ -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'}