feat: implement auto reflow for MessageBar layouts

[ling1726]

Implements automatic reflow logic under the new layout option auto. This will switch between singleline and multiline layouts based on single line content overflow. According to the design spec, when the message content of the MessageBar wraps to a second line multiline layout should always be used

The reflow is handled by a resize observer and setting white-space: nowrap on the MessageBar to detect content overflow when the resize container observes events

Addresses: #22579

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against b5f4971b4b04d5a02983ec472c4cc565ebd98d80}

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	649	619	5000
Button	mount	320	316	5000
Field	mount	1086	1079	5000
FluentProvider	mount	692	709	5000
FluentProviderWithTheme	mount	73	86	10
FluentProviderWithTheme	virtual-rerender	63	60	10
FluentProviderWithTheme	virtual-rerender-with-unmount	69	71	10
InfoButton	mount	10	16	5000
MakeStyles	mount	861	856	50000
Persona	mount	1719	1703	5000
SpinButton	mount	1342	1354	5000

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7ccaa4f:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: b5f4971b4b04d5a02983ec472c4cc565ebd98d80 (build)