From bf57b63c0d06eef11f20a8eff6d8331a9898920c Mon Sep 17 00:00:00 2001 From: Dinesh Pandiyan Date: Sat, 10 Oct 2026 23:48:12 +1100 Subject: [PATCH 1/5] Compact web header --- DESIGN.md | 6 ++++-- apps/web/src/Header.tsx | 10 +++++----- apps/web/src/style.css | 7 +++---- apps/web/src/tokens.css | 6 +++++- apps/web/test/browser/app.spec.ts | 8 +++++--- ...gular-html-CXf32AcN.js => angular-html-WDNVo_Vo.js} | 2 +- .../{angular-ts-DJW2Kg-P.js => angular-ts-BOhczYCV.js} | 2 +- .../dist/assets/{apl-q_-s_TGZ.js => apl-DeNjCpkL.js} | 2 +- .../assets/{astro-CJVz5Clq.js => astro-DW2D9owd.js} | 2 +- .../assets/{blade-CaTnJ6RM.js => blade-BUOHbo8J.js} | 2 +- .../webui/dist/assets/{c-DDSp95RX.js => c-DcYSCDu2.js} | 2 +- .../assets/{chapel-DqspHXl0.js => chapel-Sq0HLoJr.js} | 2 +- .../assets/{cobol-BD3gonAE.js => cobol-CMxyKKeR.js} | 2 +- .../assets/{coffee-B_MpiBwF.js => coffee-D4A3S57d.js} | 2 +- .../dist/assets/{cpp-V7GFWQ0y.js => cpp-BPwE_Cfp.js} | 2 +- .../{crystal-e9cEPtzg.js => crystal-CRVTpaIY.js} | 2 +- .../dist/assets/{css-_2rI0llv.js => css-CgmDQBhO.js} | 2 +- .../dist/assets/{edge-oJXrbNM4.js => edge-Cusn1_Ro.js} | 2 +- .../assets/{elixir-en9Qg_SQ.js => elixir-Bt59CnIP.js} | 2 +- .../dist/assets/{elm-5XczTgvK.js => elm-ClYwyveK.js} | 2 +- .../dist/assets/{erb-DdMuMRzQ.js => erb-Bwrg5ZdG.js} | 2 +- .../{git-rebase-DqSa-smA.js => git-rebase-7u045qqf.js} | 2 +- .../{glimmer-js-C2SDWq2D.js => glimmer-js-CNWjIkk7.js} | 2 +- .../{glimmer-ts-mxnvfyph.js => glimmer-ts-CwvMMm02.js} | 2 +- .../dist/assets/{glsl-DnmYg1bZ.js => glsl-D8bH6jRR.js} | 2 +- .../{graphql-B0Eq4aiT.js => graphql-Dv0a5_Jc.js} | 2 +- .../dist/assets/{hack-Hpccj27m.js => hack-DI94Kr9B.js} | 2 +- .../dist/assets/{haml-bkaebTrI.js => haml-BdpJworv.js} | 2 +- .../{handlebars-Cp_RZvXv.js => handlebars-C2wwruI4.js} | 2 +- .../dist/assets/{html-DZv9I9Nb.js => html-CibeTp3L.js} | 2 +- ...ivative-C4x9DB2m.js => html-derivative-C3Upj-7J.js} | 2 +- .../dist/assets/{http-_Cyqgmc4.js => http-Bk_2M4C_.js} | 2 +- .../dist/assets/{hurl-CDx9EySR.js => hurl-L9tduiqi.js} | 2 +- .../assets/{index-qOEe3EB3.js => index-BVxxEhYi.js} | 6 +++--- internal/webui/dist/assets/index-BjYgOSV3.css | 1 - internal/webui/dist/assets/index-DnjokcPr.css | 1 + .../dist/assets/{java-lPyWLB2l.js => java-BYpXOSwd.js} | 2 +- .../{javascript-CqSN-VcJ.js => javascript-8twdF1vs.js} | 2 +- .../assets/{jinja-DVHpI3Ji.js => jinja-7yVvtkab.js} | 2 +- .../assets/{jison-JjSvqOOl.js => jison-DZqEJuBL.js} | 2 +- .../dist/assets/{json-CWkLxD_y.js => json-DOhnMfln.js} | 2 +- .../dist/assets/{jsx-DBHRmZyL.js => jsx-C2ux-Hhp.js} | 2 +- .../assets/{julia-DWFTltGQ.js => julia-dfHZWvm6.js} | 2 +- .../dist/assets/{just-Bmhoe9gt.js => just-BkIciXAC.js} | 2 +- .../assets/{latex-Bcxee-PR.js => latex-B_6CtjfW.js} | 2 +- .../assets/{liquid-BeP_3myT.js => liquid-BfIGmJpd.js} | 2 +- .../dist/assets/{lua-CSRt83hE.js => lua-D3o8Y60W.js} | 2 +- .../assets/{marko-BU7uox9g.js => marko-Cf1QMNfO.js} | 2 +- .../dist/assets/{mdc-D_tH3DHW.js => mdc-C0zMa93I.js} | 2 +- .../assets/{nginx-CE8daTSk.js => nginx-_XRYL7Cx.js} | 2 +- .../dist/assets/{nim-C90aJxat.js => nim-O8M2fr-m.js} | 2 +- .../dist/assets/{org-BWWOHulA.js => org-D91oWpRo.js} | 2 +- .../dist/assets/{perl-DzXlbSFI.js => perl-DkLqV5kn.js} | 2 +- .../dist/assets/{php-B2g8KKRt.js => php-DcnDgq6y.js} | 2 +- .../dist/assets/{pug-BiwjVDkK.js => pug-1GLgPb2e.js} | 2 +- .../dist/assets/{qml-DPu7AuZ_.js => qml-B4F_t-B-.js} | 2 +- .../webui/dist/assets/{r-CaZx80xz.js => r-chg6rBUt.js} | 2 +- .../assets/{razor-BgTeCNoL.js => razor-mFiUj4qp.js} | 2 +- .../assets/{regexp-CkmzLcBD.js => regexp-DCJiY2fv.js} | 2 +- .../dist/assets/{rst-BetBoc7w.js => rst-Ctmqh8hl.js} | 2 +- .../dist/assets/{ruby-iZlDYJk9.js => ruby-ywqHWaIJ.js} | 2 +- .../dist/assets/{sas-Bw60vxj-.js => sas-DA5s1bjJ.js} | 2 +- .../dist/assets/{scss-f6sjw7k_.js => scss-Cj59y-7y.js} | 2 +- ...shellscript-BL3fFvD_.js => shellscript-BxNtydZe.js} | 2 +- ...ellsession-CC2I9JKe.js => shellsession-CK2-jaWH.js} | 2 +- .../dist/assets/{soy-DKAl9I0F.js => soy-gkf1YusE.js} | 2 +- .../dist/assets/{sql-IaP04OFe.js => sql-dx6C-kYH.js} | 2 +- .../assets/{stata-Dv_6cn9o.js => stata-CL5FlTDg.js} | 2 +- .../{surrealql-DmbcuQy8.js => surrealql-DCwk7_Sk.js} | 2 +- .../assets/{svelte-uMxbmgXS.js => svelte-DsYjUWzP.js} | 2 +- .../assets/{templ-B78ksfer.js => templ-BkAX7fxJ.js} | 2 +- .../dist/assets/{tex-CaGRzAG_.js => tex-gFpDuaQ9.js} | 2 +- .../{ts-tags-CNYG2Eot.js => ts-tags-i42PUlw6.js} | 2 +- .../dist/assets/{tsx-C-FjrBVW.js => tsx-4nsXiACw.js} | 2 +- .../dist/assets/{twig-8BdDMjEc.js => twig-Daa1MRmU.js} | 2 +- .../{typescript-CRJ68kce.js => typescript-Cv-XTBHz.js} | 2 +- .../assets/{typst-B0KuliC2.js => typst-DYRSfgvv.js} | 2 +- .../dist/assets/{vue-BwtkPb4P.js => vue-elvhstAx.js} | 2 +- .../{vue-html-DuI7L0W7.js => vue-html-D_xUXC9S.js} | 2 +- .../{vue-vine-Du2VWbMb.js => vue-vine-CuFS1y20.js} | 2 +- .../dist/assets/{xml-DDJpq1Oa.js => xml-C2tVdl2M.js} | 2 +- .../dist/assets/{xsl-Bop51BZ5.js => xsl-Drnqn-HX.js} | 2 +- .../dist/assets/{yaml-CnVvXmYQ.js => yaml-C_oexhEU.js} | 2 +- internal/webui/dist/index.html | 4 ++-- 84 files changed, 103 insertions(+), 96 deletions(-) rename internal/webui/dist/assets/{angular-html-CXf32AcN.js => angular-html-WDNVo_Vo.js} (99%) rename internal/webui/dist/assets/{angular-ts-DJW2Kg-P.js => angular-ts-BOhczYCV.js} (99%) rename internal/webui/dist/assets/{apl-q_-s_TGZ.js => apl-DeNjCpkL.js} (99%) rename internal/webui/dist/assets/{astro-CJVz5Clq.js => astro-DW2D9owd.js} (98%) rename internal/webui/dist/assets/{blade-CaTnJ6RM.js => blade-BUOHbo8J.js} (99%) rename internal/webui/dist/assets/{c-DDSp95RX.js => c-DcYSCDu2.js} (99%) rename internal/webui/dist/assets/{chapel-DqspHXl0.js => chapel-Sq0HLoJr.js} (99%) rename internal/webui/dist/assets/{cobol-BD3gonAE.js => cobol-CMxyKKeR.js} (99%) rename internal/webui/dist/assets/{coffee-B_MpiBwF.js => coffee-D4A3S57d.js} (99%) rename internal/webui/dist/assets/{cpp-V7GFWQ0y.js => cpp-BPwE_Cfp.js} (99%) rename internal/webui/dist/assets/{crystal-e9cEPtzg.js => crystal-CRVTpaIY.js} (99%) rename internal/webui/dist/assets/{css-_2rI0llv.js => css-CgmDQBhO.js} (99%) rename internal/webui/dist/assets/{edge-oJXrbNM4.js => edge-Cusn1_Ro.js} (94%) rename internal/webui/dist/assets/{elixir-en9Qg_SQ.js => elixir-Bt59CnIP.js} (99%) rename internal/webui/dist/assets/{elm-5XczTgvK.js => elm-ClYwyveK.js} (99%) rename internal/webui/dist/assets/{erb-DdMuMRzQ.js => erb-Bwrg5ZdG.js} (94%) rename internal/webui/dist/assets/{git-rebase-DqSa-smA.js => git-rebase-7u045qqf.js} (93%) rename internal/webui/dist/assets/{glimmer-js-C2SDWq2D.js => glimmer-js-CNWjIkk7.js} (99%) rename internal/webui/dist/assets/{glimmer-ts-mxnvfyph.js => glimmer-ts-CwvMMm02.js} (99%) rename internal/webui/dist/assets/{glsl-DnmYg1bZ.js => glsl-D8bH6jRR.js} (96%) rename internal/webui/dist/assets/{graphql-B0Eq4aiT.js => graphql-Dv0a5_Jc.js} (98%) rename internal/webui/dist/assets/{hack-Hpccj27m.js => hack-DI94Kr9B.js} (99%) rename internal/webui/dist/assets/{haml-bkaebTrI.js => haml-BdpJworv.js} (98%) rename internal/webui/dist/assets/{handlebars-Cp_RZvXv.js => handlebars-C2wwruI4.js} (98%) rename internal/webui/dist/assets/{html-DZv9I9Nb.js => html-CibeTp3L.js} (99%) rename internal/webui/dist/assets/{html-derivative-C4x9DB2m.js => html-derivative-C3Upj-7J.js} (92%) rename internal/webui/dist/assets/{http-_Cyqgmc4.js => http-Bk_2M4C_.js} (95%) rename internal/webui/dist/assets/{hurl-CDx9EySR.js => hurl-L9tduiqi.js} (96%) rename internal/webui/dist/assets/{index-qOEe3EB3.js => index-BVxxEhYi.js} (98%) delete mode 100644 internal/webui/dist/assets/index-BjYgOSV3.css create mode 100644 internal/webui/dist/assets/index-DnjokcPr.css rename internal/webui/dist/assets/{java-lPyWLB2l.js => java-BYpXOSwd.js} (99%) rename internal/webui/dist/assets/{javascript-CqSN-VcJ.js => javascript-8twdF1vs.js} (99%) rename internal/webui/dist/assets/{jinja-DVHpI3Ji.js => jinja-7yVvtkab.js} (98%) rename internal/webui/dist/assets/{jison-JjSvqOOl.js => jison-DZqEJuBL.js} (99%) rename internal/webui/dist/assets/{json-CWkLxD_y.js => json-DOhnMfln.js} (97%) rename internal/webui/dist/assets/{jsx-DBHRmZyL.js => jsx-C2ux-Hhp.js} (99%) rename internal/webui/dist/assets/{julia-DWFTltGQ.js => julia-dfHZWvm6.js} (99%) rename internal/webui/dist/assets/{just-Bmhoe9gt.js => just-BkIciXAC.js} (97%) rename internal/webui/dist/assets/{latex-Bcxee-PR.js => latex-B_6CtjfW.js} (99%) rename internal/webui/dist/assets/{liquid-BeP_3myT.js => liquid-BfIGmJpd.js} (98%) rename internal/webui/dist/assets/{lua-CSRt83hE.js => lua-D3o8Y60W.js} (99%) rename internal/webui/dist/assets/{marko-BU7uox9g.js => marko-Cf1QMNfO.js} (99%) rename internal/webui/dist/assets/{mdc-D_tH3DHW.js => mdc-C0zMa93I.js} (99%) rename internal/webui/dist/assets/{nginx-CE8daTSk.js => nginx-_XRYL7Cx.js} (99%) rename internal/webui/dist/assets/{nim-C90aJxat.js => nim-O8M2fr-m.js} (98%) rename internal/webui/dist/assets/{org-BWWOHulA.js => org-D91oWpRo.js} (96%) rename internal/webui/dist/assets/{perl-DzXlbSFI.js => perl-DkLqV5kn.js} (99%) rename internal/webui/dist/assets/{php-B2g8KKRt.js => php-DcnDgq6y.js} (99%) rename internal/webui/dist/assets/{pug-BiwjVDkK.js => pug-1GLgPb2e.js} (99%) rename internal/webui/dist/assets/{qml-DPu7AuZ_.js => qml-B4F_t-B-.js} (98%) rename internal/webui/dist/assets/{r-CaZx80xz.js => r-chg6rBUt.js} (99%) rename internal/webui/dist/assets/{razor-BgTeCNoL.js => razor-mFiUj4qp.js} (99%) rename internal/webui/dist/assets/{regexp-CkmzLcBD.js => regexp-DCJiY2fv.js} (99%) rename internal/webui/dist/assets/{rst-BetBoc7w.js => rst-Ctmqh8hl.js} (96%) rename internal/webui/dist/assets/{ruby-iZlDYJk9.js => ruby-ywqHWaIJ.js} (98%) rename internal/webui/dist/assets/{sas-Bw60vxj-.js => sas-DA5s1bjJ.js} (99%) rename internal/webui/dist/assets/{scss-f6sjw7k_.js => scss-Cj59y-7y.js} (99%) rename internal/webui/dist/assets/{shellscript-BL3fFvD_.js => shellscript-BxNtydZe.js} (99%) rename internal/webui/dist/assets/{shellsession-CC2I9JKe.js => shellsession-CK2-jaWH.js} (91%) rename internal/webui/dist/assets/{soy-DKAl9I0F.js => soy-gkf1YusE.js} (99%) rename internal/webui/dist/assets/{sql-IaP04OFe.js => sql-dx6C-kYH.js} (99%) rename internal/webui/dist/assets/{stata-Dv_6cn9o.js => stata-CL5FlTDg.js} (99%) rename internal/webui/dist/assets/{surrealql-DmbcuQy8.js => surrealql-DCwk7_Sk.js} (99%) rename internal/webui/dist/assets/{svelte-uMxbmgXS.js => svelte-DsYjUWzP.js} (99%) rename internal/webui/dist/assets/{templ-B78ksfer.js => templ-BkAX7fxJ.js} (99%) rename internal/webui/dist/assets/{tex-CaGRzAG_.js => tex-gFpDuaQ9.js} (98%) rename internal/webui/dist/assets/{ts-tags-CNYG2Eot.js => ts-tags-i42PUlw6.js} (98%) rename internal/webui/dist/assets/{tsx-C-FjrBVW.js => tsx-4nsXiACw.js} (99%) rename internal/webui/dist/assets/{twig-8BdDMjEc.js => twig-Daa1MRmU.js} (98%) rename internal/webui/dist/assets/{typescript-CRJ68kce.js => typescript-Cv-XTBHz.js} (99%) rename internal/webui/dist/assets/{typst-B0KuliC2.js => typst-DYRSfgvv.js} (99%) rename internal/webui/dist/assets/{vue-BwtkPb4P.js => vue-elvhstAx.js} (98%) rename internal/webui/dist/assets/{vue-html-DuI7L0W7.js => vue-html-D_xUXC9S.js} (99%) rename internal/webui/dist/assets/{vue-vine-Du2VWbMb.js => vue-vine-CuFS1y20.js} (99%) rename internal/webui/dist/assets/{xml-DDJpq1Oa.js => xml-C2tVdl2M.js} (97%) rename internal/webui/dist/assets/{xsl-Bop51BZ5.js => xsl-Drnqn-HX.js} (95%) rename internal/webui/dist/assets/{yaml-CnVvXmYQ.js => yaml-C_oexhEU.js} (99%) diff --git a/DESIGN.md b/DESIGN.md index eed3a0ae..78392343 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -193,7 +193,9 @@ such detail into a token. New layout spacing must use the scale. - Use a full-width application shell, not a centered marketing container. The diff receives all width remaining after navigation. -- Header: `--topbar-height` (56 desktop, 48 narrow). Toolbar and sidebar tabs: `--toolbar-height` +- Header: `--topbar-height` (40 desktop, 48 narrow or coarse pointer). Keep + desktop controls at 32px, header icons at 16px, the divider at 16px, and group + spacing at 8px so the header recedes into the editor chrome. Toolbar and sidebar tabs: `--toolbar-height` (44) as the desktop baseline. The narrow toolbar matches the 48px page header; its icon buttons match the header theme button's 32px control height. - Header uses `--panel`, a quiet brand, and the review trigger as its primary @@ -345,7 +347,7 @@ such detail into a token. New layout spacing must use the scale. branch, worktree, and directory identity. Use a search icon and shortcut hint, never a dropdown chevron. Click and Cmd/Ctrl+K open the same searchable “Switch review” dialog. Position it at - `--topbar-height` plus `--space-6` on desktop (80px default), `--space-4` on + `--topbar-height` plus `--space-6` on desktop (64px default), `--space-4` on mobile (16px default). Bound picker width to 35rem and viewport gutters. The picker owns focus and stays available during context errors. - Search leads the picker; keep “Switch review” as its screen-reader title. diff --git a/apps/web/src/Header.tsx b/apps/web/src/Header.tsx index 76b1cc00..adaf49d5 100644 --- a/apps/web/src/Header.tsx +++ b/apps/web/src/Header.tsx @@ -54,9 +54,9 @@ export function Header() { onClick={sidebar.toggle} > {sidebar.expanded ? ( - + ) : ( - + )} @@ -125,11 +125,11 @@ export function Header() { } > {themePreference === "system" ? ( -