From ba3e01fc5d459aa8e0e047fbc84f3f9049645c92 Mon Sep 17 00:00:00 2001 From: Anan Zhuang Date: Mon, 31 Oct 2022 12:01:00 -0700 Subject: [PATCH] [Backport 1.x][BUG]fix suggestion list cutoff issue (#2646) 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: https://github.com/opensearch-project/OpenSearch-Dashboards/issues/2555 Backport PR: https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2607 Signed-off-by: Anan Zhuang Signed-off-by: Anan Zhuang --- CHANGELOG.md | 3 ++- src/plugins/data/public/ui/typeahead/_suggestion.scss | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a1139634e441..bb1b469baa09 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,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 @@ -52,7 +53,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 index 7d559e926ba6..70758d5b6211 100644 --- 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;