[Bug]: Success MessageBar does not reflow correctly when zoomed to 400%

[khmakoto]

Library

React / v8 (@fluentui/react)

System Info

N/A

Are you reporting Accessibility issue?

None

Reproduction

This can be reproduced by zooming in the docsite's MessageBar page

Bug Description

Actual Behavior

The success MessageBar component reflows incorrectly when zoomed in to 400%, with the text being compressed and the buttons staying at the top vs the text flowing normally and pushing the buttons down.

Expected Behavior

The success MessageBar component should reflow correctly when zoomed in to 400%.

Logs

No response

Requested priority

Normal

Products/sites affected

OOUI

Are you willing to submit a PR to fix?

yes

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.