fix: stop header overlap on narrow screens and prioritise chapter title

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,16 +139,16 @@
             <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">
                         <span class="fa fa-solid fa-comment fa-lg text-light me-1" aria-hidden="true"></span>
                         Feedback
                     </a>
                 </div>
-                <a class="d-md-none"
+                <a class="d-lg-none"
                    target="_blank"
                    rel="noopener"
                    aria-label="Send feedback"

EssentialCSharp.Web/src/components/HeaderStatus.vue

@@ -1,20 +1,32 @@
 <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"
             class="page-menu menu-chapter-title text-light"
         >
             <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>

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 {