From 7ab3bfcc1e1a61e0f589a2d2a10a6e12a0cf0b08 Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <konstantin.gogov@sap.com>
Date: Wed, 10 Sep 2025 16:35:01 +0300
Subject: [PATCH 1/2] fix(ui5-select): allow value state message popover to
 grow beyond select width

Enable value state message popover to use full available width
instead of being constrained to select component width.
Also fixes blank space issue in standalone value state popover.

Jira: BGSOFUIPIRIN-6922
---
 packages/main/src/Select.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 66693a37ffe5..0dd8c5f73eaf 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -995,6 +995,7 @@ class Select extends UI5Element implements IFormInputElement {
 		return {
 			popoverValueState: {
 				"ui5-valuestatemessage-root": true,
+				"ui5-valuestatemessage-header": !this._isPhone,
 				"ui5-valuestatemessage--success": this.valueState === ValueState.Positive,
 				"ui5-valuestatemessage--error": this.valueState === ValueState.Negative,
 				"ui5-valuestatemessage--warning": this.valueState === ValueState.Critical,
@@ -1009,11 +1010,12 @@ class Select extends UI5Element implements IFormInputElement {
 	get styles() {
 		return {
 			popoverHeader: {
-				"max-width": `${this.offsetWidth}px`,
+				"display": "block",
 			},
 			responsivePopoverHeader: {
 				"display": this.options.length && this._listWidth === 0 ? "none" : "inline-block",
 				"width": `${this.options.length ? this._listWidth : this.offsetWidth}px`,
+				"max-width": "100%",
 			},
 			responsivePopover: {
 				"min-width": `${this.offsetWidth}px`,

From 7dd63260dae4f0d8ac13c0e5df0482bf5a0bb279 Mon Sep 17 00:00:00 2001
From: Konstantin Gogov <konstantin.gogov@sap.com>
Date: Tue, 16 Sep 2025 15:58:03 +0300
Subject: [PATCH 2/2] chore: add test for Select value state message popover
 width

---
 packages/main/cypress/specs/Select.cy.tsx | 38 +++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx
index 4ad8461ea70f..0c21d1cdbe66 100644
--- a/packages/main/cypress/specs/Select.cy.tsx
+++ b/packages/main/cypress/specs/Select.cy.tsx
@@ -461,6 +461,44 @@ describe("Select - Popover", () => {
 			.should("be.visible")
 			.should("have.text", "Custom message");
 	});
+
+	it("Value state message popover can extend beyond select width", () => {
+		cy.mount(
+			<Select valueState="Critical">
+				<Option>Short</Option>
+				<Option>Long</Option>
+				<div slot="valueStateMessage">
+					This is a very long value state message that should extend beyond the narrow select component width and not be constrained by it.
+				</div>
+			</Select>
+		);
+
+		// Trigger the value state popover by clicking and then pressing Escape
+		cy.get("[ui5-select]")
+			.realClick()
+			.realPress("Escape");
+
+		// Get the select width for comparison
+		cy.get("[ui5-select]")
+			.invoke("outerWidth")
+			.as("selectWidth");
+
+		// Find the standalone value state popover
+		cy.get("[ui5-select]")
+			.shadow()
+			.find(".ui5-valuestatemessage-popover")
+			.should("exist")
+			.as("valueStatePopover");
+
+		// Verify the popover width is greater than the select width
+		cy.get("@valueStatePopover")
+			.invoke("outerWidth")
+			.then((popoverWidth) => {
+				cy.get("@selectWidth").then((selectWidth) => {
+					expect(popoverWidth).to.be.greaterThan(Number(selectWidth));
+				});
+			});
+		});
 });
 
 describe("Select - Properties", () => {