Show the signed-in username in the header

[ebouchut]

Need

Once logged in, nothing in the page chrome tells users which account they are acting as: the header shows Dashboard, Courses, and Log out, and the username only appears in the dashboard greeting. This matters when switching between student, instructor, and admin accounts.

Show the signed-in username in the header, next to Log out: muted, non-interactive text; escaped (it is user-typed data); truncated with an ellipsis so a long username cannot distort the header. Screen readers should hear "Signed in as ".

Plan: docs/plans/2026-07-28-header-username.md

Acceptance criteria

• The username is visible in the header on every page when authenticated, absent when anonymous.
• Screen readers announce "Signed in as " (RGAA-friendly, visually-hidden prefix).
• A 50-character username (the database cap) truncates with an ellipsis; the header layout holds in both themes.
• Covered by MockMvc assertions; full test suite, Checkstyle, and axe stay green.

[ebouchut]

Reopening after review because of two problems with the first implementation:

1. The username reads like just another navigation item, whereas it should be
   visually distinct. This is an account status, not a link.
2. The header breaks on mobile when logged in: .nav__list never wraps,
   so the 12rem username item pushes the Log out button off-screen.

Follow-up planned on the same branch: move the username and Log out button into
a separate site-header__account group with a divider, and let the nav
list wrap (fix applies to the anonymous header too).