From 93761e1178e2fb995121b4de245774edc074f13a Mon Sep 17 00:00:00 2001
From: Benjamin Michaelis <git@relay.benjamin.michaelis.net>
Date: Sun, 25 Oct 2026 22:49:19 -0700
Subject: [PATCH] fix: stop header overlap on narrow screens and prioritise
 chapter title

- 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.
---
 .../Views/Shared/_Layout.cshtml               |  8 +--
 .../src/components/HeaderStatus.vue           | 20 ++++--
 EssentialCSharp.Web/wwwroot/css/styles.css    | 61 ++++++++++++++++---
 3 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
index 80b695d5..a855c9b4 100644
--- a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
+++ b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -118,7 +118,7 @@
                 <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">
+                <div class="d-none d-xxl-block">
                     <ul class="nav align-items-center">
                         <li class="nav-item">
                             <a class="@(ViewBag.PageTitle == "About" ? "active nav-link" : "nav-link")" href="/about">About</a>
@@ -139,8 +139,8 @@
             <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">
-                    <a class="btn btn-primary btn-sm rounded-pill"
+                <div class="border-end pe-3 d-none d-lg-block flex-shrink-0">
+                    <a class="btn btn-primary btn-sm rounded-pill text-nowrap"
                        target="_blank"
                        rel="noopener"
                        href="https://github.com/IntelliTect/EssentialCSharp.Web/discussions/new?category=feedback-and-ideas">
@@ -148,7 +148,7 @@
                         Feedback
                     </a>
                 </div>
-                <a class="d-md-none"
+                <a class="d-lg-none"
                    target="_blank"
                    rel="noopener"
                    aria-label="Send feedback"
diff --git a/EssentialCSharp.Web/src/components/HeaderStatus.vue b/EssentialCSharp.Web/src/components/HeaderStatus.vue
index 2b15d05c..8f837b13 100644
--- a/EssentialCSharp.Web/src/components/HeaderStatus.vue
+++ b/EssentialCSharp.Web/src/components/HeaderStatus.vue
@@ -1,11 +1,15 @@
 <script setup>
-import { inject } from "vue";
+import { computed, inject } from "vue";
 
 const shell = inject("shell");
+const progressLabel = computed(() => `${Math.round(shell.percentComplete)}% complete`);
 </script>
 
 <template>
-    <div class="d-flex align-items-center justify-content-center gap-3 overflow-hidden">
+    <div
+        class="d-flex align-items-center justify-content-center gap-3 overflow-hidden"
+        :title="shell.isContentPage ? progressLabel : null"
+    >
         <a
             v-if="shell.chapterParentPage"
             :href="shell.chapterParentPage.href"
@@ -13,8 +17,16 @@ const shell = inject("shell");
         >
             <span>{{ shell.chapterParentPage.title }}</span>
         </a>
-        <div v-if="shell.isContentPage" class="page-menu menu-progress text-light">
-            <span>{{ shell.percentComplete }}%</span>
+        <div v-if="shell.isContentPage" class="menu-progress-track" :title="progressLabel">
+            <div
+                class="menu-progress-bar"
+                role="progressbar"
+                :aria-valuenow="Math.round(shell.percentComplete)"
+                aria-valuemin="0"
+                aria-valuemax="100"
+                :aria-label="progressLabel"
+                :style="{ width: `${shell.percentComplete}%` }"
+            ></div>
         </div>
     </div>
 </template>
diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
index 0acdce53..9c453807 100644
--- a/EssentialCSharp.Web/wwwroot/css/styles.css
+++ b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -213,7 +213,7 @@ a:hover {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  min-width: 0;
+  flex: 0 0 auto;
 }
 
 .header-brand {
@@ -224,13 +224,27 @@ a:hover {
 }
 
 #header-status-host {
-  flex: 0 1 auto;
+  flex: 1 1 0;
   min-width: 0;
+  padding: 0 0.75rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* overflow:hidden on #manage shifts the inline-block baseline; align by top instead */
+.banner .has-tooltip {
+  vertical-align: top;
+}
+
+#manage {
+  max-width: 14rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-@media (min-width: 992px) {
-  #header-status-host {
-    flex: 1 1 0;
+@media (max-width: 767.98px) {
+  #manage {
+    max-width: 10rem;
   }
 }
 
@@ -282,12 +296,41 @@ a:hover {
   font-size: 1.2rem;
   text-overflow: ellipsis;
   cursor: pointer;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
-.menu-progress {
-  font-style: normal;
-  font-weight: 200;
-  font-size: 1rem;
+/* Let the title shrink with an ellipsis instead of being clipped */
+#header-status-host > div {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* Hide the title only when its box is too narrow to show anything readable */
+#header-status-host {
+  container-type: inline-size;
+}
+
+@container (max-width: 5rem) {
+  .menu-chapter-title {
+    display: none;
+  }
+}
+
+/* Progress is a thin track along the bottom of the fixed header, so the title keeps the space.
+   The faint full-width track keeps it from reading as a page-load bar. */
+.menu-progress-track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+  background: rgba(255, 255, 255, 0.18);
+}
+
+.menu-progress-bar {
+  height: 100%;
+  background: var(--primary-accent-color);
 }
 
 .has-tooltip {