[Bug]: Message Bar multiline dismiss button layout

[Mich0608]

Component

MessageBar

Package version

3.0.2

@microsoft/fast-element version

2.10.5

Environment

System:
    OS: macOS 26.5.2
    CPU: (8) arm64 Apple M3
    Memory: 182.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 151.0.7922.76
    Edge: 151.0.4129.59
    Firefox: 153.0.1
    Safari: 26.5.2

Current Behavior

When the Message bar is in multiline mode, the dismiss button slot has a padding-block-start set in styles. This pushes the dismiss button down and it no longer aligns with the text.

Expected Behavior

It would make sense for the dismiss button to be aligned with the text

Reproduction

https://stackblitz.com/edit/vitejs-vite-bcx6wwh6?file=src%2Fmain.ts

Steps to reproduce

1. Go to linked Stackblitz repro
2. Observe that the dismiss button is misaligned with the text in multiline mode

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

[tudorpopams]

Thanks for the report and the minimal repro — confirmed in source. The padding-block-start comes from the multiline dismiss slot rule in packages/web-components/src/message-bar/message-bar.styles.ts:

:host([layout='multiline']) ::slotted([slot='dismiss']) {
  align-items: start;
  height: 100%;
  padding-block-start: var(--spacingVerticalS);
}

You mentioned you're willing to submit a PR — that would be very welcome, and we'd be happy to review it. Worth checking the multiline VR test snapshots in apps/vr-tests-web-components alongside the change, since the padding is likely baselined there.