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

## 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,
removed `flex-grow-1` from status host, removed redundant `d-md-block`
- `EssentialCSharp.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 committed

---

## Testing

Inspected with Playwright at 1440×900, 1200×800, 992×768, 768×1024,
480×800, and 375×667.

Author: BenjaminMichaelis

.gitignore

@@ -10,6 +10,7 @@ TestResults/
 ~$*.do[ct]x
 ~*.tmp
 ~$*.dotm
+.playwright-mcp/
 
 # Files to keep (primarily book content)
 !.gitignore

EssentialCSharp.Web/Views/Shared/_Layout.cshtml

@@ -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>
@@ -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">

EssentialCSharp.Web/wwwroot/css/styles.css

@@ -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;
+  }
+}
+
+.banner ul.nav {
+  flex-wrap: nowrap;
+  max-height: var(--toolbar-height);
+  overflow: clip;
+  align-items: center;
 }
 
 .menu-btn {
+  position: relative;
   margin: 0 5px 0 5px;
   display: inline-block;
   outline: none;
@@ -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;
 }
 
 .has-tooltip .sidebar-tooltip-text:after {