[Bug]: <MessageBar> reflow does not work when resizing container

[chenxinyanc]

Library

React Components / v9 (@fluentui/react-components)

System Info

Using StackBlitz

@fluentui/react-components v9.53.0

Are you reporting Accessibility issue?

no

Reproduction

https://stackblitz.com/edit/bsgdde?file=src%2Fexample.tsx,src%2FApp.tsx

Bug Description

Actual Behavior

Message bar didn't switch between single-line and multi-line mode when I resize the window (or the <div> container). Especially, this causes long messages being trimmed by the single-line message bar.

I'm using default layout so it would be "auto" by default.

Expected Behavior

The MessageBar will reflow by default once the body content wraps to a second line. This changes the layout of the actions in the MessageBar. [1]

If I understand the documentation correctly, I think the message bar will automatically switch between singleline & multiline when I either change its content or resize the container of <MessageBar>.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.