[Backport 1.x][BUG]fix suggestion list cutoff issue (opensearch-proje…

…ct#2646) (opensearch-project#2700) In this PR, we fixed the suggestion list cutoff in an easy way. We remove width 250px and add block display to allow browser to select a width and add ellipsis at the bottom. However, we might have longer input that can't fit into the search. When we truncate the search, the elements look the same which might be still an issue for customer usage. We definitely need more feedbacks on the cutoff behavior. Issue resolved: opensearch-project#2555 Backport PR: opensearch-project#2607 Signed-off-by: Anan Zhuang <[email protected]> Signed-off-by: Anan Zhuang <[email protected]> (cherry picked from commit ba3e01f) Co-authored-by: Anan Zhuang <[email protected]>
joshuarrrr · Nov 1, 2022 · 4d20f78 · 4d20f78
1 parent 5c384ee
commit 4d20f78
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 📈 Features/Enhancements
 
 ### 🐛 Bug Fixes
+* [BUG] Fix suggestion list cutoff issue ([#2607](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2607))
 
 ### 🚞 Infrastructure
 
@@ -46,7 +47,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 ### 🛠 Maintenance
 
-* [Version] Increment to 1.4 ([#1341](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1341)) 
+* [Version] Increment to 1.4 ([#1341](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/1341))
 
 ### 🪛 Refactoring
 

diff --git a/src/plugins/data/public/ui/typeahead/_suggestion.scss b/src/plugins/data/public/ui/typeahead/_suggestion.scss
@@ -141,7 +141,7 @@ $osdTypeaheadTypes: (
   flex-grow: 0; /* 2 */
   flex-basis: auto; /* 2 */
   font-family: $euiCodeFontFamily;
-  width: 250px;
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   padding: $euiSizeXS $euiSizeS;