fix: avoid shifting notification center regions on hover (#9893)

jouni · web-flow · commit 5a25d89cd04f · 2025-08-05T10:57:47.000+03:00
diff --git a/packages/notification/src/styles/vaadin-notification-container-base-styles.js b/packages/notification/src/styles/vaadin-notification-container-base-styles.js
@@ -79,8 +79,12 @@ export const notificationContainerStyles = css`
     padding: var(--_paint-area);
   }
 
+  [region]:not([region='middle'], [region$='center']):where(:hover, :focus-within) {
+    margin-inline: calc(var(--_paint-area) * -1);
+  }
+
   [region]:not([region='middle']):where(:hover, :focus-within) {
-    margin: calc(var(--_paint-area) * -1);
+    margin-block: calc(var(--_paint-area) * -1);
   }
 
   [region-group='top'] > [region] {

Original file line number	Diff line number	Diff line change
@@ -79,8 +79,12 @@ export const notificationContainerStyles = css`
`79`	`79`	`padding: var(--_paint-area);`
`80`	`80`	`}`
`81`	`81`
	`82`	`+ [region]:not([region='middle'], [region$='center']):where(:hover, :focus-within) {`
	`83`	`+ margin-inline: calc(var(--_paint-area) * -1);`
	`84`	`+ }`
	`85`	`+`
`82`	`86`	`[region]:not([region='middle']):where(:hover, :focus-within) {`
`83`		`- margin: calc(var(--_paint-area) * -1);`
	`87`	`+ margin-block: calc(var(--_paint-area) * -1);`
`84`	`88`	`}`
`85`	`89`
`86`	`90`	`[region-group='top'] > [region] {`