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

* 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.
This commit is contained in:
Anso
2026-05-05 07:58:30 -04:00
committed by GitHub
parent 49d775c61f
commit 6f45a3b788
2 changed files with 8 additions and 8 deletions
+1 -1
View File
@@ -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> {
@@ -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>
);