From 323985f4caea97a3679db12c35c2b9e4ad58d8e5 Mon Sep 17 00:00:00 2001 From: Val Alexander <68980965+BunsDev@users.noreply.github.com> Date: Wed, 29 Apr 2026 14:33:39 -0500 Subject: [PATCH] fix(ui): align sidebar trigger affordances Align the Control UI and exported transcript sidebar triggers around a shared accessible hamburger affordance. --- src/auto-reply/reply/export-html/template.css | 58 ++++++++++++++++--- .../reply/export-html/template.html | 12 ++-- .../export-html/template.security.test.ts | 16 +++++ ui/src/styles/layout.css | 36 ++++++++++++ ui/src/styles/layout.mobile.css | 21 ------- ui/src/styles/layout.mobile.test.ts | 25 ++++++++ ui/src/ui/app-render.ts | 2 +- ui/src/ui/navigation.browser.test.ts | 1 + 8 files changed, 134 insertions(+), 37 deletions(-) diff --git a/src/auto-reply/reply/export-html/template.css b/src/auto-reply/reply/export-html/template.css index 69ef9765ae9..b99c93e0b4d 100644 --- a/src/auto-reply/reply/export-html/template.css +++ b/src/auto-reply/reply/export-html/template.css @@ -969,25 +969,67 @@ body { } /* Mobile */ -#hamburger { +#hamburger.sidebar-menu-trigger { display: none; position: fixed; top: 10px; left: 10px; z-index: 100; - padding: 3px 8px; - font-size: 12px; - font-family: inherit; - background: transparent; + align-items: center; + justify-content: center; + width: 38px; + height: 38px; + padding: 0; + background: var(--body-bg); color: var(--muted); border: 1px solid var(--dim); - border-radius: 3px; + border-radius: 999px; cursor: pointer; + transition: + background 120ms ease, + border-color 120ms ease, + color 120ms ease, + transform 120ms ease; + box-shadow: + 0 8px 20px rgba(0, 0, 0, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.06); } -#hamburger:hover { +#hamburger.sidebar-menu-trigger:hover { + background: var(--container-bg); color: var(--text); border-color: var(--text); + transform: translateY(-1px); +} + +#hamburger.sidebar-menu-trigger:active { + transform: translateY(0); +} + +#hamburger.sidebar-menu-trigger:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--body-bg), + 0 0 0 3px var(--accent); +} + +#hamburger.sidebar-menu-trigger svg { + width: 18px; + height: 18px; + fill: none; + stroke: currentColor; + stroke-width: 2; + stroke-linecap: round; +} + +@media (prefers-reduced-motion: reduce) { + #hamburger.sidebar-menu-trigger { + transition: none; + } + + #hamburger.sidebar-menu-trigger:hover { + transform: none; + } } #sidebar-overlay { @@ -1022,7 +1064,7 @@ body { } #hamburger { - display: block; + display: inline-flex; } .sidebar-close { diff --git a/src/auto-reply/reply/export-html/template.html b/src/auto-reply/reply/export-html/template.html index e1256b7cb67..e1b55e8f41c 100644 --- a/src/auto-reply/reply/export-html/template.html +++ b/src/auto-reply/reply/export-html/template.html @@ -7,13 +7,11 @@ -