Skip to content

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

Open
TheSeydiCharyyev wants to merge 1 commit into
block:mainfrom
TheSeydiCharyyev:fix/web-px-text-guard
Open

fix(web): scale avatar initials with zoom, wire up the px-text guard#2946
TheSeydiCharyyev wants to merge 1 commit into
block:mainfrom
TheSeydiCharyyev:fix/web-px-text-guard

Conversation

@TheSeydiCharyyev

Copy link
Copy Markdown
Contributor

Summary

PubkeyAvatar pins its small-size initials to text-[10px]. The disc around them (h-6 w-6) is rem-based, so browser zoom scales the disc while the initials stay at 10 physical px — the glyphs shrink relative to their box as the user zooms in. That is the freeze-against-zoom problem the shared px-text guard exists to catch.

Nothing caught it because web never wired that guard up. Web runs two of the three shared guards in scripts/check-file-sizes-core and check-pubkey-truncation-core — but not check-px-text-core, even though that core is written for multiple apps and takes a per-app overrides allowlist just like the other two.

This change:

  • adds a 2xs font-size token (0.6875rem / 11px) to web/tailwind.config.js, mirroring the desktop token of the same name;
  • uses text-2xs in PubkeyAvatar instead of the text-[10px] literal;
  • adds web/scripts/check-px-text.mjs and wires check:px-text into web's check chain, so arbitrary text-[…px] / text-[…rem] literals cannot drift back in.

The allowlist is empty on purpose — web has no fixed-size display glyphs of the kind desktop exempts (avatar emoji, onboarding titles).

Related issue

None found. I searched open issues and the changed-file list of every open PR: none touch web/package.json, web/tailwind.config.js, web/scripts/ or web/src/features/repos/ui/PubkeyAvatar.tsx.

Testing

web package on Windows 11, node 22.17.1, pnpm 11.4.0.

  • With the text-[10px] literal restored, the new guard fails on it: Web px-text check failed: src/features/repos/ui/PubkeyAvatar.tsx:20: text-[10px].
  • With the token in place, pnpm check passes all four steps (biome, file sizes, px-text, pubkey truncation), pnpm typecheck is clean, and pnpm build succeeds.
  • Confirmed the token actually resolves rather than silently emitting nothing: the built stylesheet contains .text-2xs{font-size:.6875rem}. Without that check a missing token would leave the initials at an inherited size, which would look like a fix while being a regression.

@TheSeydiCharyyev
TheSeydiCharyyev requested a review from a team as a code owner July 26, 2026 05:16
@cameronhotchkies cameronhotchkies added the triage-ready Appropriate for agentic review label Jul 29, 2026
@TheSeydiCharyyev

Copy link
Copy Markdown
Contributor Author

CI is green here: 21 checks pass and the rest skip on path filters. The Web job ran the new check:px-text guard, so the wiring this PR adds is already exercised by the repo's own pipeline.

Still applies to current main: web/package.json has no check:px-text, web/tailwind.config.js has no sub-text-xs token, and PubkeyAvatar still uses text-[10px] — which stays at 10 physical px while the h-6 w-6 disc around it scales with browser zoom.

@TheSeydiCharyyev

Copy link
Copy Markdown
Contributor Author

CI is green here: the full matrix ran on 2026-07-29 and passed, including the Web job that exercises the check:px-text guard this PR adds. There are no review comments yet. I can rebase or narrow the change if that is useful.

`PubkeyAvatar` pinned its small-size initials to `text-[10px]`. The disc
around them (`h-6 w-6`) is rem-based, so browser zoom scales the disc while
the initials stay at 10 physical px - the glyphs shrink relative to their
box as the user zooms in. That is exactly the freeze-against-zoom problem
the shared px-text guard exists to catch.

Nothing caught it because web never wired that guard up. Web runs two of
the three shared guards in `scripts/` (file sizes, pubkey truncation) but
not `check-px-text-core`, even though the core is written for multiple apps
and takes a per-app overrides allowlist.

Add a `2xs` font-size token (0.6875rem / 11px) mirroring desktop's, use it
in `PubkeyAvatar`, and add `check:px-text` to web's check chain so
arbitrary `text-[...px]` and `text-[...rem]` literals cannot drift back in.
There are no allowlist entries: web has no fixed-size display glyphs of the
kind desktop exempts.

Verified on the built output that the token resolves - `dist` CSS contains
`.text-2xs{font-size:.6875rem}` - so the initials now scale with zoom
instead of silently falling back to an inherited size.

Signed-off-by: Seydi Charyyev <seydi.charyev@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

triage-ready Appropriate for agentic review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants