Skip to content

Commit a48139a

Browse files
andrewserongtellthemachinest-hamanociampo
authored and
gutenbergplugin
committed
Snackbar: Fix scaling issue with snackbars that update their content via a common id (#75709)
* Snackbar: Fix scaling issue with snackbars that update their content via a common id * Move margin rule to mixin for centering * Add comment explaining the inline style * Update changelog Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 4163316 commit a48139a

3 files changed

Lines changed: 18 additions & 7 deletions

File tree

‎packages/base-styles/_mixins.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -224,15 +224,17 @@
224224
@mixin snackbar-container() {
225225
position: fixed;
226226
bottom: 24px;
227-
left: 50%;
228-
right: auto;
229-
transform: translateX(-50%);
230-
width: max-content;
231-
max-width: calc(100vw - 32px);
227+
left: 0;
228+
right: 0;
229+
padding-inline: 16px;
232230
box-sizing: border-box;
233231
display: flex;
234232
flex-direction: column;
235-
align-items: center;
233+
pointer-events: none;
234+
235+
.components-snackbar {
236+
margin-inline: auto;
237+
}
236238
}
237239

238240
// These are additional styles for all captions, when the theme opts in to block styles.

‎packages/components/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Bug Fixes
6+
7+
- `SnackbarList`: Fix scaling distortion when a snackbar's content is updated in place via a shared notice ID ([#75709](https://github.com/WordPress/gutenberg/pull/75709)).
8+
59
## 32.2.0 (2026-02-18)
610

711
### Bug Fixes

‎packages/components/src/snackbar/list.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,12 @@ export function SnackbarList( {
8686

8787
return (
8888
<motion.div
89-
layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
89+
layout={ isReducedMotion ? false : 'position' } // See https://www.framer.com/docs/animation/#layout-animations
90+
// Ensures a stable full-width bounding box so that
91+
// `layout="position"` only ever detects vertical
92+
// shifts, preventing horizontal animation when
93+
// notice text changes in place.
94+
style={ { width: '100%' } }
9095
initial="init"
9196
animate="open"
9297
exit="exit"

0 commit comments

Comments
 (0)