Repository navigation
fix: stop header overlap on narrow screens and prioritise chapter title - #1567
Merged
Merged
Conversation
- Keep the brand group from shrinking so it no longer overlaps the status area. - Truncate the chapter title with an ellipsis, and hide it only when its box is too narrow to read. - Replace the "NN%" text with a thin progress bar on a faint track along the header bottom edge, with a hover tooltip and progressbar semantics. - Show the Feedback button as an icon until lg, and keep its label on one line. - Truncate long usernames in the header greeting and align it with Logout.
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Navigation becomes unavailable at 992–1399px, and the progress track does not span the full header as intended.
1 open issue
What changed in this PR
This pull request improves the responsive header layout to prevent overlap on narrow screens while preserving chapter context, account controls, feedback access, and progress visibility.
Changes:
- Prevents branding and long usernames from causing header overlap.
- Adds responsive chapter-title truncation and hiding behavior.
- Replaces the progress percentage with an accessible progress bar and tooltip.
- Adjusts navigation and feedback control breakpoints.
| File | Description |
|---|---|
EssentialCSharp.Web/wwwroot/css/styles.css |
Adds responsive sizing, truncation, container-query behavior, username limits, and progress-track styling. |
EssentialCSharp.Web/Views/Shared/_Layout.cshtml |
Updates responsive navigation and feedback controls. |
EssentialCSharp.Web/src/components/HeaderStatus.vue |
Implements the accessible progress bar and completion tooltip. |
Review effort: Lite
Comment on lines
+323
to
+327
| position: absolute; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| height: 3px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
On narrow screens (e.g. 723px wide) the header's brand text, chapter status and login greeting overlapped, and the progress percentage was clipped.
Changes
NN%text is replaced by a thin progress bar on a faint full-width track along the header's bottom edge, with a hover tooltip (5% complete) androle="progressbar". The track keeps it from reading as a page-load bar.lg, full pill with the label fromlgup, and the label stays on one line.Testing
Checked manually against the real app (SQL Server in a container) with a ~40-character username at 375, 723, 800, 900, 1000, 1100 and 1500px, logged in and out. No automated tests cover this layout.
Known, not changed here: at ~375-723px the floating AI chat button overlaps the right end of "Logout".
Note
wwwroot/distis gitignored, so the front end needsnpm run buildafter pulling (HeaderStatus.vuechanged).