Skip to content

dashboard: sidebar / body type too small, sidebar column too narrow #461

@esengine

Description

@esengine

The dashboard's text scale is undersized at default zoom — particularly in the left sidebar (TOC / sections), which currently runs at 10–12.5px and lives in a column narrow enough to make multi-word entries wrap awkwardly.

Where it shows up

dashboard/app.css:

  • .toc-section — 10px uppercase, 0.14em letter-spacing → unreadable at standard viewing distance.
  • .toc h1 — 14px (the sidebar title itself).
  • .toc .sub — 11px subtitle.
  • .swatch .hex, .scale-row .lbl — 10.5px.
  • Body copy (.subsec > p, .subsec > h3 .desc) — 12.5px / 12px.

The body text is also small relative to standard product UI; the sidebar is the worst offender, but the whole page reads as too-tight when measured against typical dashboard / docs sites.

What I want

  • Bump base font-size: sidebar links from 12.5px → ~14px, sidebar section headers from 10px → 12px (and lower the letter-spacing so they don't fight against the size bump).
  • Bump body copy from 12.5/13px to ~15px with line-height: 1.55–1.6.
  • Widen the sidebar column so 2–3 word section labels don't wrap mid-word, or set text-wrap: balance / overflow-wrap rules so wrapping is graceful.
  • Verify on a 13" laptop at 100% zoom (the current numbers were tuned on a larger display).

Out of scope

  • Theming / dark-mode tweaks.
  • Mobile breakpoints — desktop-first pass; mobile gets a separate look once desktop is right.

Metadata

Metadata

Assignees

No one assigned

    Labels

    dashboardWeb companion — v1 only; v2 has no web dashboardenhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions