diff --git a/packages/fiori/src/themes/SearchField.css b/packages/fiori/src/themes/SearchField.css index b23ea0cb6c17..e0e20e75a4a4 100644 --- a/packages/fiori/src/themes/SearchField.css +++ b/packages/fiori/src/themes/SearchField.css @@ -76,15 +76,24 @@ /* scope select */ [ui5-select] { outline: none; - margin: var(--_ui5_search_input_scope_margin); - max-width: 10rem; + margin: 0 0.25rem; + width: fit-content; + min-width: auto; + max-width: 18rem; + flex: 0 1 auto; border-radius: var(--_ui5_search_input_border_radius); border: var(--_ui5-search-border); box-shadow: none; - background: unset; - background-color: var(--_ui5-search-elements-background); - height: var(--_ui5-search-select-height); - --_ui5_select_label_color: var(--sapShell_TextColor); + background: none; + height: 1.75rem; + --_ui5_select_label_color: var(--sapField_TextColor); +} + +.ui5-search-field-content [ui5-select]::part(label) { + padding-inline-end: 0.25rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } [ui5-select]:hover { diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html index ca7254e3ae2d..20eed50c7988 100644 --- a/packages/fiori/test/pages/Search.html +++ b/packages/fiori/test/pages/Search.html @@ -221,6 +221,17 @@ The examples shows scoped search with scoped suggestions. Change scope to filter suggestions. +
+ Search with long Scoped Suggestions + + + + + + + This example demonstrates scope adaptive width behavior. +
+
Search with Suggestions - Filters and noTypeAhead @@ -312,6 +323,8 @@ { name: 'Manage Products', scope: 'apps' }, { name: 'Mobile Phones', scope: 'products' }, { name: 'Tablet', scope: 'products' }, + { name: 'Long Scope', scope: 'long' }, + { name: 'Very long scope', scope: 'long' }, ]; function createScopeItems(scope) { diff --git a/packages/main/src/SelectTemplate.tsx b/packages/main/src/SelectTemplate.tsx index c0ed1fb24c7c..3d9a12c55143 100644 --- a/packages/main/src/SelectTemplate.tsx +++ b/packages/main/src/SelectTemplate.tsx @@ -24,6 +24,7 @@ export default function SelectTemplate(this: Select) {