fix(desktop): restore zoom on timeline text via rem tokens#1051
Closed
tellaho wants to merge 1 commit into
Closed
Conversation
Cmd +/- zoom scales the root <html> font-size (rem-only by design), but PR #891 converted the message-timeline + thread render path from rem tokens to hardcoded px (text-[15px]/text-[13px], font-size: 15px), freezing that text against zoom. Preserve Kenny's 15px chat sizing intent but express it in rem so it scales: add rem-based `text-chat` (0.9375rem === 15px) and `text-code` (0.8125rem === 13px) Tailwind tokens, and swap the px classes over in MessageRow, markdown, mentionChip, and globals.css (.mention-highlight). Codify it: add `pnpm check:px-text` CI guard flagging new px text in the timeline/thread render path, wired into `pnpm check`, plus an AGENTS.md note steering future agents to rem tokens. Scoped to the regression footprint — no app-wide sweep. Co-authored-by: Taylor Ho <taylorkmho@gmail.com> Signed-off-by: Taylor Ho <taylorkmho@gmail.com>
Collaborator
Author
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.
Category: fix
User Impact: Browser zoom (Cmd +/-) once again scales text in the message timeline and thread UI.
Problem: Zoom scales the root
<html>font-size (rem-only, by design from #573). PR #891 ("Tune chat text sizing") converted timeline + thread text from rem tokens to hardcoded px (text-[15px]/text-[13px]), which froze that text against zoom. Kenny's intent was to bump chat text 14px → 15px — the bug was the unit, not the size.Solution: Express Kenny's 15px intent in rem so it scales again, and add a guard so px text can't be reintroduced in the timeline/thread render path. No stock Tailwind token hits 15px (it sits between
text-sm14px andtext-base16px), so two semantic rem tokens were the right call.File changes
desktop/tailwind.config.js
Added two rem-based font-size tokens:
text-chat(0.9375rem=== 15px, lineHeight baked in) andtext-code(0.8125rem=== 13px). Comments explain why a custom token was needed.desktop/src/features/messages/ui/MessageRow.tsx
Swapped #891's px classes back to the new tokens for markdown body + author name.
desktop/src/shared/ui/markdown.tsx
Swapped px classes to tokens for chat body, code blocks, and inline code.
desktop/src/shared/ui/mentionChip.ts
Mention chip text now uses the rem token.
desktop/src/shared/styles/globals.css
.mention-highlightfont-size15px→0.9375rem.desktop/scripts/check-px-text.mjs / scripts/check-px-text-core.mjs
New
check:px-textguard flagging px text classes (text-[NNpx]and CSSfont-size: NNpx) in the timeline/thread render path, with an override escape hatch and a clear fix message.desktop/package.json
Wired
check:px-textintopnpm check.AGENTS.md
New "Text sizing & zoom (use rem, never px)" section with checkmark/cross examples steering future agents to rem tokens.
RESEARCH/TIMELINE_ZOOM_REM_REGRESSION.md
Findings + decision tree documenting the regression and fix.
Reproduction Steps
pnpm check— the newcheck:px-textguard passes; reintroducing atext-[15px]class makes it fail with a fix message.Reviewer notes
Reviewed by Marge against the full Desktop Core CI gate — biome (lint + formatting),
pnpm check(incl. new guard), typecheck, 719 tests passing, build — all green. Zoom behavior confirmed in the running app. Approved.