sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

Wave-5 reskin batch 5: normalize stray pixel text sizes onto the declared ladder

Browse Source 
--text-xxs (10px) joins the ladder; every component-level text-[9|10|11px]
literal in owned components now pulls from the ladder (graph-view.tsx and
home.tsx untouched — graph stream). Cosmetic pins updated where touched.
This commit is contained in:
amosblomqvist
2026-09-12 23:48:27 +03:00
parent 649495bf29
commit 3360181e41
11 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/globals.css
+2
View File
@@ -88,6 +88,8 @@
--font-title: "lh-cmu", serif; --font-title: "lh-cmu", serif;
/* The modular type ladder — each size carries its own line-height. /* The modular type ladder — each size carries its own line-height.
Component sizes must pull from this ladder. */ Component sizes must pull from this ladder. */
--text-xxs: 10px;
--text-xxs--line-height: 1.4;
--text-xs: 11px; --text-xs: 11px;
--text-xs--line-height: 1.4; --text-xs--line-height: 1.4;
--text-sm: 12.5px; --text-sm: 12.5px;
components/activity-dock.tsx
+1 -1
View File
@@ -294,7 +294,7 @@ export function ActivityDock({ feed: feedProp }: { feed?: ActivityFeed }) {
narrow && "max-h-[60dvh] overflow-y-auto", narrow && "max-h-[60dvh] overflow-y-auto",
)} )}
> >
<div className="flex items-center gap-2 px-1 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"> <div className="flex items-center gap-2 px-1 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<ActivityIcon className="size-3.5" /> <ActivityIcon className="size-3.5" />
Background activity Background activity
<span className="ml-auto tabular-nums" data-testid="activity-total-cost" title="Total running cost (inferred)"> <span className="ml-auto tabular-nums" data-testid="activity-total-cost" title="Total running cost (inferred)">
components/answered-card.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
{answer.note && ( {answer.note && (
<div data-testid="your-thinking" className="mt-3 border-l-2 border-primary/40 pl-3"> <div data-testid="your-thinking" className="mt-3 border-l-2 border-primary/40 pl-3">
<span className="mb-0.5 block text-[10px] font-medium uppercase tracking-wide text-muted-foreground"> <span className="mb-0.5 block text-xxs font-medium uppercase tracking-wide text-muted-foreground">
Your thinking Your thinking
</span> </span>
<span className="block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span> <span className="block whitespace-pre-wrap text-sm text-foreground/90">{answer.note}</span>
components/artifacts/steer-card.tsx
+2 -2
View File
@@ -81,8 +81,8 @@ function ResearchCompleteBadge({ result }: { result: ResearchResult }) {
<span className="font-medium uppercase tracking-wide">Research</span> <span className="font-medium uppercase tracking-wide">Research</span>
<span>complete</span> <span>complete</span>
{result.sources.length > 0 && <span>· {result.sources.length} sources</span>} {result.sources.length > 0 && <span>· {result.sources.length} sources</span>}
<span className="ml-1 text-[11px] text-muted-foreground/70 group-open:hidden">view brief</span> <span className="ml-1 text-xs text-muted-foreground/70 group-open:hidden">view brief</span>
<span className="ml-1 hidden text-[11px] text-muted-foreground/70 group-open:inline">hide brief</span> <span className="ml-1 hidden text-xs text-muted-foreground/70 group-open:inline">hide brief</span>
</summary> </summary>
<div className="mt-2"> <div className="mt-2">
<ResearchBriefCard output={result} /> <ResearchBriefCard output={result} />
components/composer.tsx
+2 -2
View File
@@ -70,14 +70,14 @@ export function Composer({
<button <button
type="button" type="button"
onClick={verdict.onAccept} onClick={verdict.onAccept}
className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-emerald-600 px-3 text-[11px] font-medium text-white transition-colors hover:bg-emerald-500" className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-emerald-600 px-3 text-xs font-medium text-white transition-colors hover:bg-emerald-500"
> >
<CheckIcon className="size-3" /> Accept plan <CheckIcon className="size-3" /> Accept plan
</button> </button>
<button <button
type="button" type="button"
onClick={verdict.onDecline} onClick={verdict.onDecline}
className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-destructive px-3 text-[11px] font-medium text-destructive-foreground transition-colors hover:opacity-90" className="flex h-[19px] items-center justify-center gap-1 rounded-md bg-destructive px-3 text-xs font-medium text-destructive-foreground transition-colors hover:opacity-90"
> >
<XIcon className="size-3" /> Decline <XIcon className="size-3" /> Decline
</button> </button>
components/model-picker.tsx
+4 -4
View File
@@ -160,7 +160,7 @@ export function ModelControl({
className="flex items-center gap-1.5 rounded-full border border-border/60 bg-card/70 px-2.5 py-1 transition-colors hover:border-border hover:bg-muted" className="flex items-center gap-1.5 rounded-full border border-border/60 bg-card/70 px-2.5 py-1 transition-colors hover:border-border hover:bg-muted"
> >
<span className="text-card-foreground">{effectiveId ? prettyModel(effectiveId) : "—"}</span> <span className="text-card-foreground">{effectiveId ? prettyModel(effectiveId) : "—"}</span>
<span aria-hidden className="text-[9px] text-muted-foreground">▾</span> <span aria-hidden className="text-xxs text-muted-foreground">▾</span>
</button> </button>
<span aria-hidden>·</span> <span aria-hidden>·</span>
<button <button
@@ -177,7 +177,7 @@ export function ModelControl({
<span className="text-card-foreground"> <span className="text-card-foreground">
{effectiveLevel === undefined ? "Thinking —" : `Thinking: ${LEVEL_LABEL[effectiveLevel] ?? effectiveLevel}`} {effectiveLevel === undefined ? "Thinking —" : `Thinking: ${LEVEL_LABEL[effectiveLevel] ?? effectiveLevel}`}
</span> </span>
<span aria-hidden className="text-[9px] text-muted-foreground">▾</span> <span aria-hidden className="text-xxs text-muted-foreground">▾</span>
</button> </button>
{open === "model" && ( {open === "model" && (
@@ -234,7 +234,7 @@ export function ModelControl({
</li> </li>
))} ))}
</ul> </ul>
<div className="mt-1 border-t px-2 pt-1.5 text-[10px] text-muted-foreground"> <div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
Applies to the next turn · background agents stay config-pinned Applies to the next turn · background agents stay config-pinned
</div> </div>
</div> </div>
@@ -266,7 +266,7 @@ export function ModelControl({
</button> </button>
))} ))}
{error && <div className="mt-1 text-destructive">{error}</div>} {error && <div className="mt-1 text-destructive">{error}</div>}
<div className="mt-1 border-t px-2 pt-1.5 text-[10px] text-muted-foreground"> <div className="mt-1 border-t px-2 pt-1.5 text-xxs text-muted-foreground">
Levels this model actually supports Levels this model actually supports
</div> </div>
</div> </div>
components/plan-block.tsx
+1 -1
View File
@@ -473,7 +473,7 @@ export function PlanPopup({ messages, onClose }: { messages: readonly PopupMessa
/> />
</div> </div>
<div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2"> <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-2">
<span className="text-[10px] text-muted-foreground/60">Drag to pan · scroll to zoom</span> <span className="text-xxs text-muted-foreground/60">Drag to pan · scroll to zoom</span>
<div className="flex gap-1"> <div className="flex gap-1">
<button <button
type="button" type="button"
components/plan-window.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export function PlanWindow({ messages, onOpen }: { messages: readonly PopupMessa
title="Open the full plan" title="Open the full plan"
className="fixed bottom-3 left-3 z-30 hidden w-80 flex-col gap-1 rounded-xl border bg-card/95 p-2 text-left shadow-lg backdrop-blur sm:flex" className="fixed bottom-3 left-3 z-30 hidden w-80 flex-col gap-1 rounded-xl border bg-card/95 p-2 text-left shadow-lg backdrop-blur sm:flex"
> >
<div className="flex items-center gap-2 px-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"> <div className="flex items-center gap-2 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
<WaypointsIcon className="size-3.5 text-primary" /> <WaypointsIcon className="size-3.5 text-primary" />
The plan The plan
<span className="ml-auto min-w-0 truncate font-normal normal-case" title={currentTitle ?? undefined}> <span className="ml-auto min-w-0 truncate font-normal normal-case" title={currentTitle ?? undefined}>
components/question-dock.tsx
+4 -4
View File
@@ -307,7 +307,7 @@ function QuestionDockForm({
)} )}
> >
{isSel && ( {isSel && (
<span className={cn(qd.mode === "multi-select" ? "text-[10px]" : "size-1.5 rounded-full bg-current")}> <span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
{qd.mode === "multi-select" ? "✓" : ""} {qd.mode === "multi-select" ? "✓" : ""}
</span> </span>
)} )}
@@ -357,7 +357,7 @@ function QuestionDockForm({
)} )}
> >
{sel.otherSelected && ( {sel.otherSelected && (
<span className={cn(qd.mode === "multi-select" ? "text-[10px]" : "size-1.5 rounded-full bg-current")}> <span className={cn(qd.mode === "multi-select" ? "text-xxs" : "size-1.5 rounded-full bg-current")}>
{qd.mode === "multi-select" ? "✓" : ""} {qd.mode === "multi-select" ? "✓" : ""}
</span> </span>
)} )}
@@ -396,7 +396,7 @@ function QuestionDockForm({
data-testid={qd.mode === "text" ? "answer-field" : "thinking-field"} data-testid={qd.mode === "text" ? "answer-field" : "thinking-field"}
className="rounded-xl border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50" className="rounded-xl border border-border/70 bg-background/60 transition-colors focus-within:border-primary/50"
> >
<div className="px-2.5 pt-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"> <div className="px-2.5 pt-2 text-xxs font-medium uppercase tracking-wide text-muted-foreground">
{qd.mode === "text" ? "Your answer" : "Your thinking"} {qd.mode === "text" ? "Your answer" : "Your thinking"}
</div> </div>
{qd.mode === "text" ? ( {qd.mode === "text" ? (
@@ -439,7 +439,7 @@ function QuestionDockForm({
)} )}
<div className="flex items-center justify-between gap-2 p-1"> <div className="flex items-center justify-between gap-2 p-1">
{qd.mode !== "text" && ( {qd.mode !== "text" && (
<span aria-hidden className="pl-1.5 text-[10px] text-muted-foreground"> <span aria-hidden className="pl-1.5 text-xxs text-muted-foreground">
⌘/Ctrl + ↵ submits ⌘/Ctrl + ↵ submits
</span> </span>
)} )}
components/sidebar.tsx
+1 -1
View File
@@ -253,7 +253,7 @@ function SessionsSidebar() {
</button> </button>
<div className="mx-3 mb-1 flex items-center gap-2"> <div className="mx-3 mb-1 flex items-center gap-2">
<span className="text-[10px] uppercase tracking-widest text-muted-foreground/70">Sessions</span> <span className="text-xxs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
<span className="relative flex-1"> <span className="relative flex-1">
<Input <Input
data-testid="session-search" data-testid="session-search"
components/stats-bar.tsx
+3 -3
View File
@@ -48,7 +48,7 @@ export function StatsBar({
// (so its transparent gradient area never blocks scrolling) — this row // (so its transparent gradient area never blocks scrolling) — this row
// must re-enable events or every control on it is dead (the model- // must re-enable events or every control on it is dead (the model-
// control wave caught this live: buttons rendered, clicks never landed). // control wave caught this live: buttons rendered, clicks never landed).
className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-1.5 text-[11px] text-muted-foreground" className="pointer-events-auto relative flex items-center justify-between gap-3 px-3 pt-1.5 text-xs text-muted-foreground"
> >
<button <button
type="button" type="button"
@@ -79,7 +79,7 @@ export function StatsBar({
data-testid="stats-detail" data-testid="stats-detail"
className="absolute bottom-full left-0 z-40 mb-1.5 w-72 rounded-xl border bg-card p-3 text-xs shadow-xl" className="absolute bottom-full left-0 z-40 mb-1.5 w-72 rounded-xl border bg-card p-3 text-xs shadow-xl"
> >
<div className="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"> <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
Session stats Session stats
</div> </div>
<div className="flex flex-col gap-1 text-muted-foreground"> <div className="flex flex-col gap-1 text-muted-foreground">
@@ -102,7 +102,7 @@ export function StatsBar({
</div> </div>
{turns.length > 0 && ( {turns.length > 0 && (
<> <>
<div className="mb-1 mt-2.5 border-t pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"> <div className="mb-1 mt-2.5 border-t pt-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
Turns Turns
</div> </div>
<ul className="flex max-h-56 flex-col gap-1 overflow-y-auto"> <ul className="flex max-h-56 flex-col gap-1 overflow-y-auto">