fix(ui5-input): ValueStateMessage width fixed (#2736)

Martotko · web-flow · commit 1e8082d31d75 · 2021-02-08T16:22:23.000+02:00
* fix(ui5-input): ValueStateMessage width fixed

* Lint checks passed
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -1104,7 +1104,7 @@ class Input extends UI5Element {
 	get styles() {
 		return {
 			popoverHeader: {
-				"width": `${this._inputWidth}px`,
+				"max-width": `${this._inputWidth}px`,
 			},
 			suggestionPopoverHeader: {
 				"display": this._listWidth === 0 ? "none" : "inline-block",
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -71,6 +71,7 @@
 			no-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"
+			horizontal-align="Left"
 		>
 			<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 				{{> valueStateMessage}}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
@@ -882,7 +882,7 @@ class MultiComboBox extends UI5Element {
 				"padding": "0.9125rem 1rem",
 			},
 			popoverHeader: {
-				"width": `${this._inputWidth}px`,
+				"max-width": `${this._inputWidth}px`,
 			},
 		};
 	}
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -98,6 +98,7 @@
 		no-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"
+		horizontal-align="Left"
 	>
 		<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
 			{{> valueStateMessage}}

Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,7 @@`
`71`	`71`	`no-arrow`
`72`	`72`	`class="ui5-valuestatemessage-popover"`
`73`	`73`	`placement-type="Bottom"`
	`74`	`+ horizontal-align="Left"`
`74`	`75`	`>`
`75`	`76`	`<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">`
`76`	`77`	`{{> valueStateMessage}}`
Original file line number	Diff line number	Diff line change
`@@ -882,7 +882,7 @@ class MultiComboBox extends UI5Element {`
`882`	`882`	`"padding": "0.9125rem 1rem",`
`883`	`883`	`},`
`884`	`884`	`popoverHeader: {`
`885`		- "width": `${this._inputWidth}px`,
	`885`	+ "max-width": `${this._inputWidth}px`,
`886`	`886`	`},`
`887`	`887`	`};`
`888`	`888`	`}`
Original file line number	Diff line number	Diff line change
`@@ -98,6 +98,7 @@`
`98`	`98`	`no-arrow`
`99`	`99`	`class="ui5-valuestatemessage-popover"`
`100`	`100`	`placement-type="Bottom"`
	`101`	`+ horizontal-align="Left"`
`101`	`102`	`>`
`102`	`103`	`<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">`
`103`	`104`	`{{> valueStateMessage}}`