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..4474813e89b2 100644
--- a/packages/main/src/themes/ValueStateMessage.css
+++ b/packages/main/src/themes/ValueStateMessage.css
@@ -53,7 +53,15 @@
 	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 {
+	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);
@@ -112,7 +120,6 @@
 	flex: none;
 	top: 0;
 	left: 0;
-	max-width: 100%;
 }
 
 .ui5-popover-with-value-state-header-phone::part(content) {