From d4dd0e384c405a865473991cd6848512c90ca7cd Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Thu, 12 Mar 2026 09:49:12 +0200
Subject: [PATCH 1/2] fix(ui5-valuestatemessage): correct width in dialogs

---
 packages/main/src/DatePickerPopoverTemplate.tsx            | 2 +-
 packages/main/src/TimePickerPopoverTemplate.tsx            | 2 +-
 packages/main/src/themes/ValueStateMessage.css             | 7 ++++++-
 .../main/src/themes/base/ValueStateMessage-parameters.css  | 4 ++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/main/src/DatePickerPopoverTemplate.tsx b/packages/main/src/DatePickerPopoverTemplate.tsx
index bee78014e311..0583d4a7502d 100644
--- a/packages/main/src/DatePickerPopoverTemplate.tsx
+++ b/packages/main/src/DatePickerPopoverTemplate.tsx
@@ -22,7 +22,7 @@ export default function DatePickerPopoverTemplate(this: DatePicker, hooks?: { he
 	return (
 		<ResponsivePopover
 			id={`${this._id}-responsive-popover`}
-			class="ui5-date-picker-popover ui5-popover-with-value-state-header-phone"
+			class="ui5-date-picker-popover"
 			opener={this}
 			open={this.open}
 			allowTargetOverlap
diff --git a/packages/main/src/TimePickerPopoverTemplate.tsx b/packages/main/src/TimePickerPopoverTemplate.tsx
index 78b0ab6662d0..b84ecce23fae 100644
--- a/packages/main/src/TimePickerPopoverTemplate.tsx
+++ b/packages/main/src/TimePickerPopoverTemplate.tsx
@@ -16,7 +16,7 @@ export default function TimePickerPopoverTemplate(this: TimePicker) {
 		<>
 			<ResponsivePopover
 				id={`${this._id}-responsive-popover`}
-				class="ui5-time-picker-popover ui5-popover-with-value-state-header-phone"
+				class="ui5-time-picker-popover"
 				placement="Bottom"
 				horizontalAlign="Start"
 				opener={this}
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
index 9f4e0bd5e436..bef01501bb1e 100644
--- a/packages/main/src/themes/ValueStateMessage.css
+++ b/packages/main/src/themes/ValueStateMessage.css
@@ -53,6 +53,12 @@
 	width: var(--_ui5_value_state_message_popover_header_width);
 }
 
+[ui5-responsive-popover].ui5-valuestatemessage-popover .ui5-valuestatemessage-header,
+[ui5-popover].ui5-valuestatemessage-popover .ui5-valuestatemessage-header {
+	max-width: 22rem;
+	width: auto;
+}
+
 [ui5-responsive-popover] .ui5-valuestatemessage-header {
 	padding: var(--_ui5_value_state_header_padding);
 	border: var(--_ui5_value_state_header_border);
@@ -112,7 +118,6 @@
 	flex: none;
 	top: 0;
 	left: 0;
-	max-width: 100%;
 }
 
 .ui5-popover-with-value-state-header-phone::part(content) {
diff --git a/packages/main/src/themes/base/ValueStateMessage-parameters.css b/packages/main/src/themes/base/ValueStateMessage-parameters.css
index f3cdd5fa348a..dc74adfcb0a2 100644
--- a/packages/main/src/themes/base/ValueStateMessage-parameters.css
+++ b/packages/main/src/themes/base/ValueStateMessage-parameters.css
@@ -18,8 +18,8 @@
 	--_ui5_value_state_message_line_height: 1rem;
 	--_ui5_value_state_message_popover_header_min_height: 2rem;
 	--_ui5_value_state_message_popover_header_min_width: 6rem;
-	--_ui5_value_state_message_popover_header_max_width: 22rem;
-	--_ui5_value_state_message_popover_header_width: auto;
+	--_ui5_value_state_message_popover_header_max_width: 100%;
+	--_ui5_value_state_message_popover_header_width: 100%;
 	--_ui5_value_state_message_icon_offset_phone: 1rem;
 	--_ui5_value_state_header_border_bottom: none;
 }

From 10fc8fd94fee25a407eef464522c23b08770c844 Mon Sep 17 00:00:00 2001
From: i518532 <ivaylo.plashkov@sap.com>
Date: Thu, 12 Mar 2026 10:17:12 +0200
Subject: [PATCH 2/2] fix(ui5-valuestatemessage): correct width in dialogs

---
 packages/main/src/themes/ValueStateMessage.css                | 2 ++
 .../main/src/themes/base/ValueStateMessage-parameters.css     | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
index bef01501bb1e..4474813e89b2 100644
--- a/packages/main/src/themes/ValueStateMessage.css
+++ b/packages/main/src/themes/ValueStateMessage.css
@@ -60,6 +60,8 @@
 }
 
 [ui5-responsive-popover] .ui5-valuestatemessage-header {
+	max-width: 100%;
+	width: 100%;
 	padding: var(--_ui5_value_state_header_padding);
 	border: var(--_ui5_value_state_header_border);
 	border-bottom: var(--_ui5_value_state_header_border_bottom);
diff --git a/packages/main/src/themes/base/ValueStateMessage-parameters.css b/packages/main/src/themes/base/ValueStateMessage-parameters.css
index dc74adfcb0a2..f3cdd5fa348a 100644
--- a/packages/main/src/themes/base/ValueStateMessage-parameters.css
+++ b/packages/main/src/themes/base/ValueStateMessage-parameters.css
@@ -18,8 +18,8 @@
 	--_ui5_value_state_message_line_height: 1rem;
 	--_ui5_value_state_message_popover_header_min_height: 2rem;
 	--_ui5_value_state_message_popover_header_min_width: 6rem;
-	--_ui5_value_state_message_popover_header_max_width: 100%;
-	--_ui5_value_state_message_popover_header_width: 100%;
+	--_ui5_value_state_message_popover_header_max_width: 22rem;
+	--_ui5_value_state_message_popover_header_width: auto;
 	--_ui5_value_state_message_icon_offset_phone: 1rem;
 	--_ui5_value_state_header_border_bottom: none;
 }