From 6f45a3b7880caecbb693ee8c47f282a90435f378 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Tue, 5 May 2026 07:58:30 -0400
Subject: [PATCH] fix(frontend): align sidebar brand box with top nav chrome
 (#928)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): align sidebar brand box with top nav chrome

Match the TopBar's 56px height so the bottom border of the brand
box meets the bottom border under the nav, removing the 7px seam.
Drop the duplicate uppercase "SENCHO" label and place the version
number baseline-aligned next to the italic wordmark. Center the
brand row, enlarge the logo (28→36px) and wordmark (22→28px), and
mark the logo as decorative since the wordmark already names it.

* test(e2e): key dashboard sentinel off logo src instead of alt text

The brand box change made the sidebar logo decorative (alt=""), since
the adjacent wordmark already names the brand. The Playwright helper
keyed loginAs() off img[alt="Sencho Logo"], so every login wait timed
out and 11 specs failed (with 25 cascading skips via suite teardown).

Switch DASHBOARD_INDICATOR to img[src*="sencho-logo"]: same DOM target,
unaffected by accessibility wording. The selector is unique to the
authenticated sidebar — login/setup screens do not render it.
---
 e2e/helpers.ts                                   |  2 +-
 frontend/src/components/sidebar/SidebarBrand.tsx | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/e2e/helpers.ts b/e2e/helpers.ts
index 8682e81a..d5d3cebe 100644
--- a/e2e/helpers.ts
+++ b/e2e/helpers.ts
@@ -25,7 +25,7 @@ export function totpNow(secret: string): string {
 }
 
 /** Selector for the dashboard - only present in EditorLayout, not on login/setup pages */
-const DASHBOARD_INDICATOR = 'img[alt="Sencho Logo"]';
+const DASHBOARD_INDICATOR = 'img[src*="sencho-logo"]';
 
 /** Returns true if the current page is the first-run setup screen */
 async function isSetupPage(page: Page): Promise<boolean> {
diff --git a/frontend/src/components/sidebar/SidebarBrand.tsx b/frontend/src/components/sidebar/SidebarBrand.tsx
index 351f9b6e..29df6e6a 100644
--- a/frontend/src/components/sidebar/SidebarBrand.tsx
+++ b/frontend/src/components/sidebar/SidebarBrand.tsx
@@ -4,17 +4,17 @@ interface SidebarBrandProps {
 
 export function SidebarBrand({ isDarkMode }: SidebarBrandProps) {
   return (
-    <div className="flex items-center gap-2 px-4 py-1.5 border-b border-glass-border">
+    <div className="flex items-center justify-center gap-3 px-4 h-14 border-b border-glass-border">
       <img
         src={isDarkMode ? '/sencho-logo-dark.png' : '/sencho-logo-light.png'}
-        alt="Sencho Logo"
-        className="w-7 h-7 shrink-0"
+        alt=""
+        className="w-9 h-9 shrink-0"
       />
-      <div className="flex flex-col leading-none">
-        <span className="font-mono text-[10px] leading-3 tracking-[0.18em] uppercase text-stat-subtitle">
-          SENCHO · v{__APP_VERSION__}
+      <div className="flex items-baseline gap-1.5">
+        <span className="font-display italic text-[28px] leading-none text-foreground">Sencho</span>
+        <span className="font-mono text-[10px] tracking-[0.18em] uppercase text-stat-subtitle">
+          v{__APP_VERSION__}
         </span>
-        <span className="font-display italic text-[22px] leading-none text-foreground mt-0.5">Sencho</span>
       </div>
     </div>
   );