v-status-message div causes horizontal scrollbar with Aura theme

[StyshakSergey]

Description

The internal div.v-status-message element renders wider than the viewport, causing an unwanted horizontal scrollbar on the page. This occurs in both development and
production modes, specifically with the Aura theme. The Lumo theme (with compact stylesheet) does not exhibit this issue.

Expected outcome

The v-status-message element should not exceed the viewport width. It should have overflow: hidden, max-width: 100vw, or be positioned in a way that does not affect the
document flow width.

Current workaround:
html {
overflow-x: hidden;
}

Minimal reproducible example

Debugging:

Running the following in the browser console:
document.querySelectorAll('*').forEach(el => {
if (el.scrollWidth > document.documentElement.clientWidth)
console.log(el.tagName, el.className, el.scrollWidth, el)
})

Output (production build, Aura theme):
HTML 1647
BODY 1647
DIV 1647 (div#outlet)
DIV 1647 (div[data-width-full][data-height-full])
VAADIN-VERTICAL-LAYOUT 1647
VAADIN-HORIZONTAL-LAYOUT 1647
DIV v-status-message 1658

The v-status-message div (1658px) is the widest element, exceeding the viewport width and triggering the cascade where all width: 100% parent elements inherit the expanded
width.

Why Aura-specific:

• The Aura theme renders components (especially MenuBar buttons) slightly wider than Lumo due to different default font sizing, padding, and spacing — and unlike Lumo, Aura
  does not offer a compact stylesheet variant
• This causes the HorizontalLayout content to be just wide enough to trigger v-status-message overflow, which then cascades to the entire page
• With the Lumo theme + Lumo.COMPACT_STYLESHEET, the same layout fits within the viewport and no overflow occurs

Steps to reproduce

1. Create a basic Vaadin application with the Aura theme loaded via @Stylesheet(Aura.STYLESHEET)
2. Add a VerticalLayout with setSizeFull() containing a HorizontalLayout with setWidthFull() and several MenuBar components
3. Open the page in a browser
4. Observe a horizontal scrollbar at the bottom of the page
5. Switch to Lumo theme — the scrollbar disappears

Environment

• Vaadin 25.0.7
• Aura theme (loaded via Aura.STYLESHEET)
• Browser: Chrome (latest)
• OS: Windows 11

Browsers

No response