diff --git a/packages/fiori/src/Search.ts b/packages/fiori/src/Search.ts
index c29e43beb832..94ee458866aa 100755
--- a/packages/fiori/src/Search.ts
+++ b/packages/fiori/src/Search.ts
@@ -75,6 +75,7 @@ type SearchEventDetails = {
* @public
* @since 2.9.0
* @experimental
+ * @csspart search-popover - Used to style the suggestions popover content
*/
@customElement({
tag: "ui5-search",
diff --git a/packages/fiori/src/SearchPopoverTemplate.tsx b/packages/fiori/src/SearchPopoverTemplate.tsx
index b5288d212c2a..cb45c678f353 100644
--- a/packages/fiori/src/SearchPopoverTemplate.tsx
+++ b/packages/fiori/src/SearchPopoverTemplate.tsx
@@ -30,6 +30,7 @@ export default function SearchPopoverTemplate(this: Search, headerTemplate?: Jsx
onClose={this._handleClose}
onBeforeClose={this._handleBeforeClose}
onBeforeOpen={this._handleBeforeOpen}
+ exportparts="content: search-popover"
class={{
"ui5-search-popover": true,
"ui5-search-popover-phone": isPhone(),
diff --git a/packages/fiori/src/themes/Search.css b/packages/fiori/src/themes/Search.css
index 6866454b926b..138fa0720534 100644
--- a/packages/fiori/src/themes/Search.css
+++ b/packages/fiori/src/themes/Search.css
@@ -26,6 +26,7 @@
.ui5-search-popover::part(content) {
padding: 0;
box-shadow: none;
+ max-height: var(--_ui5_search_popover_max_height);
}
:host([loading]) .ui5-search-popover main {
diff --git a/packages/fiori/src/themes/base/Search-parameters.css b/packages/fiori/src/themes/base/Search-parameters.css
index 5b4044c2c273..0a62e9e22112 100644
--- a/packages/fiori/src/themes/base/Search-parameters.css
+++ b/packages/fiori/src/themes/base/Search-parameters.css
@@ -1,6 +1,7 @@
:host {
--_ui5_search_item_vertical_padding: 1rem;
--_ui5_search_byline_vertical_padding: .5rem;
+ --_ui5_search_popover_max_height: 39rem;
}
@container style(--ui5_content_density: compact) {
diff --git a/packages/fiori/test/pages/Search.html b/packages/fiori/test/pages/Search.html
index 049a985675bd..b637b22850da 100644
--- a/packages/fiori/test/pages/Search.html
+++ b/packages/fiori/test/pages/Search.html
@@ -19,6 +19,10 @@
.last {
padding-bottom: 2rem;
}
+
+ #search-custom-max-height::part(search-popover) {
+ max-height: 10rem;
+ }
@@ -258,7 +262,7 @@