mirror of
https://github.com/block/buzz.git
synced 2026-10-30 22:11:36 +00:00
bfb892c985
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>
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import path from "node:path";
|
|
import { fileURLToPath } from "node:url";
|
|
import { runPxTextCheck } from "../../scripts/check-px-text-core.mjs";
|
|
|
|
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
const projectRoot = path.resolve(__dirname, "..");
|
|
|
|
// Scoped to the message-timeline / thread render path — the surface where the
|
|
// rem→px zoom regression (PR #891) landed. Readable message text here MUST use
|
|
// rem-based tokens (`text-chat`, `text-code`) so Cmd +/- zoom scales it. We
|
|
// intentionally do NOT sweep the whole app yet (decorative chrome — avatar
|
|
// initials, day dividers, diff-viewer labels — still uses px); widen these
|
|
// roots when that sweep happens.
|
|
const rules = [
|
|
{
|
|
root: "src/shared/ui",
|
|
extensions: new Set([".ts", ".tsx"]),
|
|
files: new Set(["markdown.tsx", "mentionChip.ts"]),
|
|
},
|
|
{
|
|
root: "src/features/messages/ui",
|
|
extensions: new Set([".tsx"]),
|
|
files: new Set(["MessageRow.tsx"]),
|
|
},
|
|
{
|
|
// `.mention-highlight` lives here and was part of the #891 px regression —
|
|
// guard the `font-size: NNpx` form too, not just the Tailwind utility.
|
|
root: "src/shared/styles",
|
|
extensions: new Set([".css"]),
|
|
files: new Set(["globals.css"]),
|
|
},
|
|
];
|
|
|
|
// Decorative / chrome px-text exceptions: `relativePath:lineNumber`. Empty for
|
|
// now — the regression footprint is fully on rem tokens.
|
|
const overrides = new Set();
|
|
|
|
await runPxTextCheck({
|
|
projectRoot,
|
|
rules,
|
|
overrides,
|
|
label: "Desktop",
|
|
scriptPath: "desktop/scripts/check-px-text.mjs",
|
|
});
|