fix(dashboard): bump doc-chrome typography; widen sidebar column#500
Merged
Conversation
The design-doc page chrome (`.toc` / `.section` / `.subsec`) was tuned on a larger display and reads as too tight on a 13" laptop at 100% zoom. Sidebar section headers at 10px with 0.14em tracking are the worst offender — section labels also wrap mid-word in the 240px column. - `.page` sidebar column: 240px → 260px so 2–3 word section labels fit. - `.toc h1` 14 → 15px; `.toc .sub` 11 → 12px. - `.toc-section` 10 → 12px and tracking 0.14em → 0.08em (lower so the size bump doesn't fight the letter-spacing). - `.toc li a` 12.5 → 14px with `line-height: 1.4` and `overflow-wrap: anywhere` for graceful wraps on longer labels. - `.section > .lede` 13 → 15px; `.subsec > p` 12.5 → 15px (line-height 1.6 already applied). - `.subsec > h3 .desc` 12 → 13px. - `.swatch .hex` 10.5 → 11.5px; `.scale-row .lbl` 10.5 → 11.5px (and width 70 → 76px to keep the new monospace digits aligned). Mirrored verbatim into `docs/design/agent-dashboard.html` per the "keep CSS in lockstep with the mockup" comment at the top of app.css. Closes #461
ChasLui
pushed a commit
to ChasLui/DeepSeek-Reasonix
that referenced
this pull request
May 23, 2026
…ngine#500) The design-doc page chrome (`.toc` / `.section` / `.subsec`) was tuned on a larger display and reads as too tight on a 13" laptop at 100% zoom. Sidebar section headers at 10px with 0.14em tracking are the worst offender — section labels also wrap mid-word in the 240px column. - `.page` sidebar column: 240px → 260px so 2–3 word section labels fit. - `.toc h1` 14 → 15px; `.toc .sub` 11 → 12px. - `.toc-section` 10 → 12px and tracking 0.14em → 0.08em (lower so the size bump doesn't fight the letter-spacing). - `.toc li a` 12.5 → 14px with `line-height: 1.4` and `overflow-wrap: anywhere` for graceful wraps on longer labels. - `.section > .lede` 13 → 15px; `.subsec > p` 12.5 → 15px (line-height 1.6 already applied). - `.subsec > h3 .desc` 12 → 13px. - `.swatch .hex` 10.5 → 11.5px; `.scale-row .lbl` 10.5 → 11.5px (and width 70 → 76px to keep the new monospace digits aligned). Mirrored verbatim into `docs/design/agent-dashboard.html` per the "keep CSS in lockstep with the mockup" comment at the top of app.css. Closes esengine#461
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The design-doc page chrome (
.toc/.section/.subsec) was tuned on a larger display and reads as too tight on a 13" laptop at 100% zoom. Sidebar section headers at 10px / 0.14em tracking are the worst offender, and 240px isn't wide enough for 2–3 word section labels (e.g. "§13 Hooks & Settings", "§14 Open questions"), which wrap mid-word.This PR bumps the doc-chrome scale and widens the sidebar:
.toc h114 → 15px;.toc .sub11 → 12px;.toc-section10 → 12px with tracking lowered 0.14 → 0.08em so the size bump doesn't fight the letter-spacing..toc li a12.5 → 14px withline-height: 1.4andoverflow-wrap: anywherefor graceful wraps when a label still doesn't fit..section > .lede13 → 15px;.subsec > p12.5 → 15px;.subsec > h3 .desc12 → 13px..swatch .hex10.5 → 11.5px;.scale-row .lbl10.5 → 11.5px (and width 70 → 76px to keep the new digits aligned).Mirrored verbatim into
docs/design/agent-dashboard.htmlper the "keep CSS in lockstep with the mockup" comment at the top ofapp.css.Closes #461
Test plan
npm run verify(full suite, 2324 tests).