fix: prevent horizontal scrolling in the message viewport

[mvanhorn]

Contribution Summary

Linked Issue/Ticket: Fixes #11038
RFC / Technical Design (if applicable): N/A

Description

The message view allows a few pixels of horizontal scrolling: the rendered content ends up slightly wider than the screen and can be dragged left/right. As #11038 notes, ordinary messages were not horizontally scrollable before this regressed.

The cause is in the new message reader stylesheet. The main content rule sets width: 100% together with padding: 0 8px, but without box-sizing: border-box:

.root.main-content {
  width: 100%;
  overflow-wrap: break-word;
  padding: 0 8px;
}

Under the default content-box model the 8px left/right padding is added on top of the full 100% width, so the body becomes 16px wider than the viewport, which is the small horizontal overflow the issue describes. (This also rules out the font-size theory raised on the thread: the reporter confirmed font size is at 100% and the overflow persists.)

Adding box-sizing: border-box to that rule makes the padding count inside the 100% width instead of being added to it, so the content matches the viewport width again. The change is confined to DefaultGlobalCssStyleProvider (the current default path); the legacy provider does not emit this rule and is left untouched. The existing width: 100%, overflow-wrap, and padding: 0 8px declarations are preserved, so the 8px gutter is still rendered, now within the viewport.

Screen Shots

This is a CSS box-model fix that removes a few pixels of horizontal overscroll; the difference is the absence of left/right drag rather than a visible layout change, so it is not meaningfully captured in a static screenshot. The behavior is covered instead by a unit test in DefaultGlobalCssStyleProviderTest.

AI Disclosure

Select one of the following (mandatory)

• This contribution does not include any changes created or assisted by AI.
• This contribution includes changes assisted by AI.
• This contribution includes changes created by AI.

Contribution Checklist

• I have read and affirm that my contribution adheres to Mozilla’s Community Participation Guidelines
• This contribution is in Kotlin where possible
• This contribution does not use merge commits
• This contribution adheres to the existing codestyle (run gradlew spotlessCheck to check and gradlew spotlessApply to format your source code; will be checked by CI).
• This contribution does not break existing unit tests (run gradlew testDebugUnitTest; will be checked by CI).
• This contribution includes tests for any new functionality, and maintains tests for any updated functionality.
• This contribution adheres to our Engineering process (RFC/Technical Design/ADR)
• This PR has a descriptive title and body that accurately outlines all changes made, and contains a reference to any issues that it fixes (e.g. Closes #XXX or Fixes #XXX).

[github-actions]

Missing report label. Set exactly one of: report: include, report: exclude OR report: highlight.