Skip to content

fix: responsive layout bugs - tooltip overflow, mobile gap, branding #1077

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BenjaminMichaelis merged 3 commits into from
May 9, 2026
+38 −8
Merged

fix: responsive layout bugs - tooltip overflow, mobile gap, branding #1077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f3d3a15
Fix header layout issues: invisible gap, nav overflow, mobile branding
BenjaminMichaelis May 8, 2026
9f87ee2
fix: correct remaining header layout regressions
BenjaminMichaelis May 8, 2026
eb7a089
fix: address PR review feedback on header CSS
BenjaminMichaelis May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ TestResults/
~$*.do[ct]x
~*.tmp
~$*.dotm
.playwright-mcp/

# Files to keep (primarily book content)
!.gitignore
Expand Down
10 changes: 4 additions & 6 deletions EssentialCSharp.Web/Views/Shared/_Layout.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,13 +100,11 @@
<b>Ctrl + M</b>
</span>
</button>
<a class="nav-link header-brand d-none d-sm-block @(string.IsNullOrEmpty(ViewBag.PageTitle) ? "active" : "")" href="/home">
Essential C#
</a>
<div class="d-none d-lg-block">
<ul class="nav align-items-center">
<li class="nav-item d-none d-md-block">
<a class="@(string.IsNullOrEmpty(ViewBag.PageTitle) ? "active nav-link fs-4" : "nav-link fs-4")" href="/home">
Essential C#
</a>
</li>
<li class="nav-item">
<a class="@(ViewBag.PageTitle == "About" ? "active nav-link" : "nav-link")" href="/about">About</a>
</li>
Expand All @@ -123,7 +121,7 @@
</div>
</div>

<div id="header-status-host" class="d-flex align-items-center justify-content-center flex-grow-1 overflow-hidden"></div>
<div id="header-status-host" class="d-flex align-items-center justify-content-center overflow-hidden"></div>

<div class="d-flex align-items-center">
<div class="border-end pe-3 d-none d-md-block">
Expand Down
35 changes: 33 additions & 2 deletions EssentialCSharp.Web/wwwroot/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -206,9 +206,36 @@ a:hover {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 0;
}

.header-brand {
font-size: 1.25rem;
font-weight: 400;
white-space: nowrap;
text-decoration: none;
}

#header-status-host {
flex: 0 1 auto;
min-width: 0;
}

@media (min-width: 992px) {
#header-status-host {
flex: 1 1 0;
}
Comment thread
BenjaminMichaelis marked this conversation as resolved.
}

.banner ul.nav {
flex-wrap: nowrap;
max-height: var(--toolbar-height);
Comment thread
BenjaminMichaelis marked this conversation as resolved.
overflow: clip;
align-items: center;
}

.menu-btn {
position: relative;
margin: 0 5px 0 5px;
display: inline-block;
outline: none;
Expand Down Expand Up @@ -295,11 +322,15 @@ a:hover {

.has-tooltip .sidebar-tooltip-text {
width: 90px;
position: relative;
left: 5rem;
position: absolute;
top: 50%;
left: calc(100% + 4px);
margin-left: 0;
transform: translateY(-50%);
border-radius: 10px;
padding: 10px;
white-space: normal;
z-index: 10;
Comment thread
BenjaminMichaelis marked this conversation as resolved.
}

.has-tooltip .sidebar-tooltip-text:after {
Expand Down
Loading