fix: responsive layout bugs - tooltip overflow, mobile gap, branding#1077
Merged
BenjaminMichaelis merged 3 commits intomainfrom May 9, 2026
Merged
fix: responsive layout bugs - tooltip overflow, mobile gap, branding#1077BenjaminMichaelis merged 3 commits intomainfrom
BenjaminMichaelis merged 3 commits intomainfrom
Conversation
- Fix #1 (HIGH): Remove flex-grow-1 from #header-status-host in HTML; add CSS that sets flex:0 below 992px and flex:1 at >=992px so the empty host no longer creates a massive invisible gap on mobile. - Fix #2: Add flex-wrap:nowrap and max-height to .banner ul.nav to prevent the 1px overflow at the 992px breakpoint. - Fix #3: Move 'Essential C#' branding outside the d-none d-lg-block wrapper so it remains visible on mobile (hidden only below 576px via d-none d-sm-block to save space on very small screens). - Fix #4: Remove redundant d-md-block class (was on a <li> inside a d-none d-lg-block parent, so it could never take effect). Resolved automatically by the Issue 3 restructure.
- Fix #header-status-host mobile gap: flex: 0 1 auto -> flex: 0 0 0% so the empty host takes zero layout space regardless of content, preventing justify-content:space-between from creating invisible gaps on mobile - Fix .banner ul.nav: add overflow:hidden + align-items:center so nav items cannot paint outside the 50px header boundary - Fix sidebar tooltip position: relative -> position: absolute on .sidebar-tooltip-text, with position:relative on .menu-btn as anchor. The relative positioning put the hidden span in document flow, making the hamburger button ~56px tall and overflowing the 50px header. Tooltip now appears correctly to the right of the button on hover. - Remove .playwright-mcp/ debug artifacts and header-*.png screenshots committed in the previous pass; add .playwright-mcp/ to .gitignore
BenjaminMichaelis
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses responsive header/layout issues identified during Playwright visual inspection across common viewport sizes, focusing on preventing overflow and improving alignment/branding in the site header.
Changes:
- Adjusts header flex behavior and introduces a dedicated
.header-brandstyle for consistent branding placement. - Updates tooltip positioning to avoid overflow and improves nav/header overflow handling.
- Ignores Playwright MCP debug artifacts by adding
.playwright-mcp/to.gitignore.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| EssentialCSharp.Web/wwwroot/css/styles.css | Updates header/nav flex + overflow behavior and fixes tooltip positioning/styling for responsive layouts. |
| EssentialCSharp.Web/Views/Shared/_Layout.cshtml | Repositions the brand link in the header and tweaks header structure to reduce responsive layout issues. |
| .gitignore | Prevents committing Playwright MCP debug artifacts. |
- #header-status-host: flex: 0 0 0% -> flex: 0 1 auto so the teleported HeaderStatus (chapter title + % complete) is visible on all viewports, not just >=992px. Auto basis sizes to content; shrink=1 tolerates tight layouts; grow=0 still prevents gap when element has no content. - .banner ul.nav: overflow: hidden -> overflow: clip. Clips paint without creating a scroll container, preserving focus rings on child elements (overflow:hidden clips child outlines; overflow:clip does not). - .sidebar-tooltip-text: add margin-left: 0 to reset the -60px inherited from .has-tooltip .tooltip-text. Without this, left: calc(100% + 4px) was offset 60px left, placing the tooltip over the trigger element.
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.
Summary
Fixes several header layout bugs discovered via Playwright visual inspection at multiple viewport sizes (1440px → 375px). Issues were identified.
Files Changed
EssentialCSharp.Web/Views/Shared/_Layout.cshtml— moved brand link, removedflex-grow-1from status host, removed redundantd-md-blockEssentialCSharp.Web/wwwroot/css/styles.css— tooltip positioning fix, status host flex, nav overflow/alignment, header-brand styles, menu-btn positioning context.gitignore— added.playwright-mcp/to prevent Playwright debug artifacts from being committedTesting
Inspected with Playwright at 1440×900, 1200×800, 992×768, 768×1024, 480×800, and 375×667.