fix(design): one height, one order for every item in the top bar

The language button was 8px shorter than the nav links beside it: the
links inherit the body's prose leading (1.65 -> 23.1px) while the
trigger set `line-height: 1`, and its tallest child is a 15px globe. So
hovering GitHub filled a 39px box and hovering the language name filled
a 31px one, in the same row. Both now declare 22px, which is also the
height of the theme switch that shares that row on /history.

On a phone the same cause ran the other way: the trigger drops its label
under 620px, leaving no text line box at all, so it fell back to 31px
beside a 38px GitHub link. A `min-height` derived from the padding token
holds it.

While in there, three more things that had drifted apart in the same bar:

- The order was reversed everywhere except the homepage -- language then
  GitHub on the content pages, /404 and /history; GitHub then language
  on /. Unified on the homepage's: external link first, preferences last.
- /history and /embed-demo scrolled sideways at 390px (+17px and +27px),
  with the wordmark and a nav label broken onto two lines. They are the
  two app surfaces, so they carry a theme switch that other pages keep in
  a footer they do not have, and the row could not afford 137px of
  wordmark. The bar now shows the mark alone on a phone, on every page,
  which fits both with room to spare and needed the wordmark wrapped in a
  span (it was a bare text node CSS could not select). These two pages
  are not in the sitemap, so mobile-overflow.spec.ts had never seen them.
- home.css dropped the GitHub link under 620px to make room for a
  language trigger "wide enough for Português" -- which has been
  icon-only on phones for a while. Removed.

Plus the /history filter pill, 31px next to a 32px search field.

Tests: two cases in language-menu.spec.ts -- every visible item in the
bar shares a height and a baseline across five routes on desktop and on
a phone, and neither app surface scrolls sideways at 390px. Reverse
verified: removing the line-height reddens the desktop case, removing
the min-height the phone one, and removing the wordmark rule reddens
both the phone case and the overflow case.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: chaxus

CHANGELOG.md

@@ -110,6 +110,17 @@ notes. Entries describe what users experience, not internal refactors.
 
 ### Fixed
 
+- **The top bar is one row again.** The language button was 8px shorter than
+  the links beside it, so hovering GitHub and hovering the language name lit up
+  two differently sized boxes; on a phone it was the other way round. The
+  language switch also sat on the left of GitHub on every page except the
+  homepage, where it sat on the right. Same order, same height, everywhere.
+- **The saved-documents and embed demo pages no longer scroll sideways on a
+  phone.** Both carry a theme switch in the top bar that other pages keep in a
+  footer, and at 390px wide the row ran past the edge of the screen -- the site
+  name broke onto two lines and the whole page could be dragged left and right.
+  On a phone the bar now shows the mark without the wordmark, which fits the
+  row on every page.
 - **Safari: opening a file from the homepage landed on an empty editor.** The
   homepage hands the file you pick to the editor through this browser's own
   storage, and Safari refuses to store a file that way -- so the editor opened

bin/pages/render-home.mjs

@@ -211,7 +211,7 @@ ${jsonLd}
     <section id="landing-hero">
       <header class="bar">
         <div class="wrap">
-          <a class="brand" href="${home}"><span class="logo">D</span>${e(ui.siteName)}</a>
+          <a class="brand" href="${home}"><span class="logo">D</span><span class="wordmark">${e(ui.siteName)}</span></a>
           <nav>
 ${nav}
             <a class="navlink gh" href="${REPO}" rel="noopener" target="_blank">

bin/pages/render-page.mjs

@@ -202,12 +202,12 @@ ${jsonLd}
     </svg>
 
     <header class="bar">
-      <a class="brand" href="${L.home}"><span class="logo">D</span>${ui.siteName}</a>
+      <a class="brand" href="${L.home}"><span class="logo">D</span><span class="wordmark">${ui.siteName}</span></a>
       <nav>
-${langMenu(locale, translations, ui, (l) => routeFor(l, page.slug))}
         <a href="${REPO}" rel="noopener" target="_blank">
           <svg class="ghmark" aria-hidden="true"><use href="#gh-mark"></use></svg> GitHub
         </a>
+${langMenu(locale, translations, ui, (l) => routeFor(l, page.slug))}
       </nav>
     </header>
 

docs/explorations/2026-09-02-top-bar-one-height.md

@@ -0,0 +1,104 @@
+# 顶栏四件事：一行里的高度、顺序、手机取舍（2026-09-02）
+
+## 起因
+
+用户截图：顶栏里 hover 到 **GitHub** 和 hover 到 **English**，两个填充块高度不一样。
+
+## 1. 桌面端：39px vs 31px
+
+量出来（`edit.chaxus.com`，1512px）：
+
+| 元素                        | 高度    | line-height |
+| --------------------------- | ------- | ----------- |
+| `header.bar nav a` (GitHub) | 39.09px | 23.1px      |
+| `.lang-trigger` (English)   | 31px    | 14px        |
+
+两者的 padding 完全一样（`8px 12px`），差的是行盒：
+
+- 导航链接**没写** `line-height`，继承 body 的正文行距 `1.65` → 14 × 1.65 = 23.1px；
+- 语言触发器写了 `line-height: 1`，而它里面最高的是 15px 的地球图标 → 15px。
+
+39.09 − 31 = 8.09px，正是 23.1 − 15。
+
+`docs/explorations/2026-08-26-language-menu-disclosure.md` 里明确写着这个触发器的设计
+意图是"长得和旁边的 GitHub 链接一模一样"——所以这是对既定意图的回归，不是取舍。
+
+**修**：两处都显式写 `line-height: 22px`（`landing.css` 与 `home.css` 各一份，顶栏本来
+就有两份实现）。22 不是新数字，是 `.ran-btn-content` 的默认行高，本文件里已经在用；
+22 + 8×2 = 38px，正好等于 `/history` 顶栏里那个 `r-theme-switch` 药丸的高度，三件东西
+就都是 38 了。顶栏总高 71px 不变（39.09 + 32 本来也是四舍五入到 71）。
+
+## 2. 手机端：同一个 bug，方向相反
+
+`@media (max-width: 620px)` 会把 `.lang-current`（语言名）藏掉，只剩地球和箭头。文本行
+盒随之消失，触发器又掉回 31px，而 GitHub 还是 38px——桌面修好，手机照旧。
+
+**修**：`min-height: calc(22px + var(--ran-space-2) * 2)`，从下面顶住，与 padding token
+联动而不是手抄 38。
+
+## 3. 顺序：主页和别的页是反的
+
+| 页面                               | 顶栏顺序                             |
+| ---------------------------------- | ------------------------------------ |
+| `/`（`render-home.mjs`）           | Offline · No sign-up · GitHub · 语言 |
+| `/help` `/about` `/404` `/history` | **语言 · GitHub**（· 主题）          |
+
+同一个站，从主页走到 `/help`，语言开关就跳到行的另一头。统一成主页那一版：外链在前，
+偏好类控件（语言、主题）收尾。改了 `render-page.mjs`、`public/404.html`、`history.html`。
+
+## 4. 手机上顶栏放不下，两个页面横向溢出
+
+`/history` 与 `/embed-demo` 是仅有的两个"应用面"页面：它们没有页脚，于是把主题开关放进了
+顶栏，一行里有三个控件。390px 下实测：
+
+| 页面               | 横向溢出 | 现象                            |
+| ------------------ | -------- | ------------------------------- |
+| `/history`         | +17px    | 品牌名折成两行                  |
+| `/embed-demo.html` | +27px    | "Embed API" 折成两行（60px 高） |
+
+`mobile-overflow.spec.ts` 按 sitemap 遍历，而这两页一个 noindex 一个是 demo，都不在
+sitemap 里——所以站点唯一的手机溢出门禁从来没看过它们。
+
+算过几种取法（390px，顶栏左右各 20px gutter）：
+
+| 方案                     | `/history`      | `/embed-demo`             |
+| ------------------------ | --------------- | ------------------------- |
+| 现状                     | 407 ✗           | 417 ✗                     |
+| 藏 GitHub                | 382 ✓（余 8px） | 408 ✗                     |
+| 藏 GitHub + 藏页内链接   | —               | 319 ✓（但两个链接都没了） |
+| **品牌只留标记，去掉字** | **340 ✓**       | **366 ✓**                 |
+
+最后一种最省事也最不丢信息：24px 的方块标记仍然是回首页的链接、仍然写着站名的首字母，
+而 137px 的字号 16 品牌名是这一行唯一付不起的东西（Apple / GitHub / Stripe 的手机顶栏
+都是这么做的）。代价是要给品牌名包一个 `<span class="wordmark">`——原来它是裸文本节点，
+CSS 根本选不中。五处 chrome 各加一次（两个生成器 + 404 + history + embed-demo），
+`@media (max-width: 620px)` 里一行 `display: none`。
+
+顺带清掉一条过期规则：`home.css` 在 620px 以下把 GitHub 链接藏了，注释说是"为了给宽到
+能放下 Português 的语言触发器腾地方"——而触发器早就在手机上只剩图标了（landing.css 那份
+注释里已经写了"GitHub 现在可以留下"）。主页手机顶栏因此比别的页少一个链接。删掉。
+
+## 5. 顺带：`/history` 工具栏 31px vs 32px
+
+`.history-filter` 药丸 31px，旁边的 `r-input` 搜索框 32px，两者在同一行差半个像素。
+`min-height: 32px`。
+
+## 用例
+
+`test/e2e/language-menu.spec.ts` 的 `page chrome` 组新增两条：
+
+- `{desktop, phone} × {/, /zh-CN/, /help, /history, /embed-demo.html}`：顶栏里每一件
+  可见控件的 `height@top` 必须全部相同（正则 `^(\S+)( \1)*$` 直接判"这些字符串是不是同
+  一个"）。量渲染结果而不是比 CSS 声明，因为顶栏有两份实现，两边都可能坏。
+- `the app surfaces fit a phone too`：`/history` 与 `/embed-demo.html` 在 390px 下
+  `scrollWidth - clientWidth <= 1`。补上 sitemap 门禁够不到的那两页。
+
+反向验证（三条修复各撤一次，用例都变红）：
+
+| 撤掉                         | 变红的用例                                                    |
+| ---------------------------- | ------------------------------------------------------------- |
+| `line-height: 22px`          | desktop 那条（`/` 报 items differ）                           |
+| `min-height: calc(...)`      | phone 那条（`/` 报 items differ）                             |
+| `.wordmark { display:none }` | phone 那条（`/embed-demo`）+ 手机溢出那条（`/history` +17px） |
+
+全量：单测 3410 通过，E2E 159 通过 + `@serial` 2 通过。

history.html

@@ -49,8 +49,11 @@
     </svg>
 
     <header class="bar">
-      <a class="brand" href="/"><span class="logo">D</span>Document Editor</a>
+      <a class="brand" href="/"><span class="logo">D</span><span class="wordmark">Document Editor</span></a>
       <nav>
+        <a class="gh" href="https://github.com/ranuts/document" rel="noopener" target="_blank">
+          <svg class="ghmark" aria-hidden="true"><use href="#gh-mark"></use></svg> GitHub
+        </a>
         <!-- Every target is this page; the locale rides in the query, which is
              what the app's i18n reads. -->
         <r-popover class="lang-menu" placement="bottom" trigger="click" role="button" aria-label="Language">
@@ -90,9 +93,6 @@
             </div>
           </r-content>
         </r-popover>
-        <a href="https://github.com/ranuts/document" rel="noopener" target="_blank">
-          <svg class="ghmark" aria-hidden="true"><use href="#gh-mark"></use></svg> GitHub
-        </a>
         <r-theme-switch class="theme-switch" label="Theme"></r-theme-switch>
       </nav>
     </header>

index.html

@@ -262,7 +262,7 @@
     <section id="landing-hero">
       <header class="bar">
         <div class="wrap">
-          <a class="brand" href="/"><span class="logo">D</span>Document Editor</a>
+          <a class="brand" href="/"><span class="logo">D</span><span class="wordmark">Document Editor</span></a>
           <nav>
             <a class="navlink" href="/offline-document-editor">Offline</a>
             <a class="navlink" href="/no-signup-document-editor">No sign-up</a>

public/404.html

@@ -124,8 +124,11 @@
     </svg>
 
     <header class="bar">
-      <a class="brand" href="/"><span class="logo">D</span>Document Editor</a>
+      <a class="brand" href="/"><span class="logo">D</span><span class="wordmark">Document Editor</span></a>
       <nav>
+        <a href="https://github.com/ranuts/document" rel="noopener" target="_blank">
+          <svg class="ghmark" aria-hidden="true"><use href="#gh-mark"></use></svg> GitHub
+        </a>
         <r-popover class="lang-menu" placement="bottom" trigger="click" role="button" aria-label="Language">
           <span class="lang-trigger">
             <svg class="langmark" aria-hidden="true" viewBox="0 0 16 16">
@@ -161,9 +164,6 @@
             </div>
           </r-content>
         </r-popover>
-        <a href="https://github.com/ranuts/document" rel="noopener" target="_blank">
-          <svg class="ghmark" aria-hidden="true"><use href="#gh-mark"></use></svg> GitHub
-        </a>
       </nav>
     </header>
 

public/embed-demo.html

@@ -219,7 +219,7 @@
     </svg>
 
     <header class="bar">
-      <a class="brand" href="/"><span class="logo">D</span>Document Editor</a>
+      <a class="brand" href="/"><span class="logo">D</span><span class="wordmark">Document Editor</span></a>
       <nav>
         <a href="/embed-document-editor">Embed API</a>
         <a href="https://github.com/ranuts/document" rel="noopener" target="_blank">

public/home.css

@@ -149,7 +149,11 @@ body {
   padding: var(--ran-space-2) var(--ran-space-3);
   border-radius: var(--ran-radius-sm);
   font-size: 14px;
-  line-height: 1;
+  /* Same 22px as the nav links beside it -- see #landing-hero .bar nav .navlink.
+     On a phone the label is hidden and only the two icons are left, so the line
+     box no longer sets the height: hold it from below instead. */
+  line-height: 22px;
+  min-height: calc(22px + var(--ran-space-2) * 2);
   color: var(--ran-color-text-secondary);
   cursor: pointer;
   transition: 0.15s ease;
@@ -244,6 +248,11 @@ body {
   #landing-hero .lang-current {
     display: none;
   }
+  /* Phone: the mark stays, the wordmark goes -- see landing.css, which does the
+     same for every other page's copy of this bar. */
+  #landing-hero .wordmark {
+    display: none;
+  }
 }
 
 /* ---------- top bar ---------- */
@@ -290,6 +299,11 @@ body {
   padding: var(--ran-space-2) var(--ran-space-3);
   border-radius: var(--ran-radius-sm);
   font-size: 14px;
+  /* One height for every item in the bar. Without this the links inherit the
+     body's prose leading (1.65 -> 23.1px) while the language trigger sets its
+     own line-height: the two hover pills came out 39px and 31px, visibly
+     different boxes in one row. 22px matches the theme switch beside them. */
+  line-height: 22px;
   color: var(--ran-color-text-secondary);
   transition: 0.15s ease;
 }
@@ -1111,16 +1125,6 @@ body {
     display: none;
   }
 }
-@media (max-width: 620px) {
-  /* Phone: the bar is brand + GitHub + a language name, and at 390px the
-     language trigger (wide enough for "Português") pushed the caret off the
-     viewport and broke the brand onto two lines. GitHub loses: it is one line
-     down in the footer of every page, while the language switch is the only
-     way to change the language. */
-  #landing-hero .bar nav .navlink.gh {
-    display: none;
-  }
-}
 
 @media (max-width: 560px) {
   #landing-hero .dw-body {

public/landing.css

@@ -76,6 +76,11 @@ header.bar nav a {
   padding: var(--ran-space-2) var(--ran-space-3);
   border-radius: var(--ran-radius-sm);
   font-size: 14px;
+  /* One height for every item in the bar. Without this the links inherit the
+     body's prose leading (1.65 -> 23.1px) while the language trigger sets its
+     own line-height: the two hover pills came out 39px and 31px, visibly
+     different boxes in one row. 22px matches the theme switch beside them. */
+  line-height: 22px;
   color: var(--ran-color-text-secondary);
   text-decoration: none;
   transition: 0.15s ease;
@@ -112,7 +117,12 @@ header.bar nav a:hover {
   padding: var(--ran-space-2) var(--ran-space-3);
   border-radius: var(--ran-radius-sm);
   font-size: 14px;
-  line-height: 1;
+  /* Same 22px as the nav links beside it -- see header.bar nav a. On a phone
+     the label is hidden and only the two icons are left, so the line box no
+     longer sets the height: hold it from below instead, or the pill shrinks to
+     31px next to a 38px GitHub link. */
+  line-height: 22px;
+  min-height: calc(22px + var(--ran-space-2) * 2);
   color: var(--ran-color-text-secondary);
   cursor: pointer;
   transition: 0.15s ease;
@@ -219,6 +229,16 @@ header.bar nav a:hover {
   .lang-current {
     display: none;
   }
+  /* Phone: the bar keeps the mark and drops the wordmark. The two app surfaces
+     (/history, /embed-demo) put a third control in this row -- a theme switch,
+     which every other page keeps in a footer they do not have -- and at 390px
+     brand + links + switch ran 17px and 27px past the viewport: the whole page
+     scrolled sideways and a nav label broke onto two lines. The mark is the
+     same link home and still names the site; 137px of wordmark is what the row
+     could not afford. */
+  header.bar .wordmark {
+    display: none;
+  }
 }
 
 /* ---------- article column ---------- */