Skip to content

fix(web): scale avatar initials with zoom, wire up the px-text guard #2946

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
TheSeydiCharyyev wants to merge 1 commit into
base: main
Choose a base branch
from
+41 −2
Open

fix(web): scale avatar initials with zoom, wire up the px-text guard #2946

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
"build": "tsc && vite build",
"typecheck": "tsc --noEmit",
"check:file-sizes": "node ./scripts/check-file-sizes.mjs",
"check:px-text": "node ./scripts/check-px-text.mjs",
"check:pubkey-truncation": "node ./scripts/check-pubkey-truncation.mjs",
"lint": "biome lint .",
"check": "biome check . && pnpm check:file-sizes && pnpm check:pubkey-truncation",
"check": "biome check . && pnpm check:file-sizes && pnpm check:px-text && pnpm check:pubkey-truncation",
"format": "biome format --write .",
"preview": "vite preview",
"test:e2e": "pnpm build && playwright test",
Expand Down
30 changes: 30 additions & 0 deletions web/scripts/check-px-text.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
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, "..");

// Enforces the rem-token text scale, same as the desktop app. Web already runs
// the other two shared guards (file sizes, pubkey truncation); this wires up
// the third so arbitrary `text-[…px]` / `text-[…rem]` literals cannot drift
// back in. Sizes belong in `tailwind.config.js` as rem tokens so Cmd +/- zoom,
// which scales the root <html> font-size, keeps scaling the text with them.
const rules = [
{
root: "src",
extensions: new Set([".ts", ".tsx", ".css"]),
},
];

// Decorative / chrome exceptions: `relativePath:matchedLiteral`. None yet —
// web has no fixed-size display glyphs of the kind desktop allowlists.
const overrides = new Set();

await runPxTextCheck({
projectRoot,
rules,
overrides,
label: "Web",
scriptPath: "web/scripts/check-px-text.mjs",
});
2 changes: 1 addition & 1 deletion web/src/features/repos/ui/PubkeyAvatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function PubkeyAvatar({
size?: "sm" | "md";
}) {
const hue = pubkeyToHue(pubkey);
const sizeClasses = size === "sm" ? "h-6 w-6 text-[10px]" : "h-8 w-8 text-xs";
const sizeClasses = size === "sm" ? "h-6 w-6 text-2xs" : "h-8 w-8 text-xs";

return (
<Tooltip>
Expand Down
8 changes: 8 additions & 0 deletions web/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,14 @@
export default {
theme: {
extend: {
// Sub-`text-xs` ramp for tiny glyphs (avatar initials, meta labels),
// mirroring desktop's token. Defined in rem so Cmd +/- zoom — which
// scales the root <html> font-size — keeps scaling them. Do NOT
// reintroduce arbitrary `text-[…px]` / `text-[…rem]` literals; the
// px-text guard rejects them.
fontSize: {
"2xs": "0.6875rem", // 11px
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
Expand Down