fix(responsive): remove the 4k scale override - #10
Merged
Conversation
Closes#7. `app/globals.css` declared a custom `--breakpoint-4k: 2560px`, and 170 hand-written `4k:*` utilities across 17 files then multiplied every font size, padding, gap and icon dimension by two to four times — up to `4k:text-[14rem]` for the headline number. On a large display the site did not show more content, it showed the same content enormously magnified. The breakpoint is also misnamed: 2560px is QHD width, not 4K. Anyone on a 1440p monitor at 100% scaling was already getting the blow-up, which matches the report better than the issue title does. Deleting the utilities cannot regress anything below 2560px, because `4k:` compiles to `@media (width >= 2560px)` — none of the 170 had any effect at normal widths. Large screens now get the normal type scale, and legibility is left to browser and OS zoom, which is what the removal of `maximumScale: 1` restored. Ten of the utilities never worked at all. `2560px` is a px value while Tailwind's default breakpoints are rem, and mixing units breaks the variant sort order, so `4k:` was emitted before `sm:`…`2xl:` and lost to any rem variant touching the same property. Measured at 3840x2160, `4k:max-w-[2400px]` produced a 1600px container and `4k:text-[14rem]` produced 96px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Playwright ran Desktop Chrome at 1280 plus two phones, so nothing ever exercised the widths the issue was about. Added a QHD (2560x1440) and a 4K (3840x2160) project — QHD is where the removed breakpoint actually fired. The new spec asserts the page never scrolls horizontally, that no control ends up outside the viewport, and that headings stay under 40px. That last one is the direct regression guard: with the `4k:` overrides in place the `h2` measured 72px. Adding the two projects surfaced a test that had never once executed. `should show side ads on desktop after delay` requires a viewport of at least 1536px, and no project was that wide — so it had always taken its early-exit path. Running for the first time, it failed: the workflow sets `NEXT_PUBLIC_ENABLE_ADS` but never set `NEXT_PUBLIC_ADSENSE_ID`, and `AdManager` renders nothing without an ad client. Supplying a placeholder id makes the assertion real. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Biome wants the destructured parameter broken across lines. Without it `biome ci .` fails on this branch, which would have taken the whole checks job down. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The latest updates on your projects. Learn more about Vercel for GitHub.
|
codecov-commenter
commented
Aug 1, 2026
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
devRMA
marked this pull request as ready for review
August 1, 2026 21:45
Uh oh!
There was an error while loading. Please reload this page.
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Closes#7.
What was happening
app/globals.cssdeclared a custom breakpoint and 170 hand-written4k:*utilities across 17 files then multiplied every font size, padding, gap and icon dimension by two to four times — up to4k:text-[14rem]for the headline number.On a large display the site did not show more content, it showed the same content enormously magnified. That is the screenshot in the issue.
Two things worth knowing before reviewing
The breakpoint is misnamed. 2560px is QHD width, not 4K. Anyone on a 1440p monitor at 100% scaling was already getting the blow-up — which matches the report better than the issue title does.
Ten of the 170 utilities never worked at all.
2560pxis a px value while Tailwind's default breakpoints are rem, and mixing units breaks the variant sort order, so4k:was emitted beforesm:…2xl:and lost to any rem variant touching the same property. Measured at 3840×2160 before this change:4k:max-w-[2400px]4k:text-[14rem]4k:text-5xlon theh1Why deleting is safe
4k:compiles to@media (width >= 2560px). None of the 170 utilities had any effect below 2560px, so removing them cannot change the layout at any width a normal viewport reports. There was no base class to restore anywhere — the properties were already unset under that threshold.Large screens now get the normal type scale. Legibility on a high-DPI display is the browser's and the OS's job, and #9 restored the user's ability to do it by removing
maximumScale: 1, which the4k:overrides had been badly imitating.Regression guard
Playwright ran Desktop Chrome at 1280 plus two phones, so nothing ever exercised the widths this issue is about. Added a QHD (2560×1440) and a 4K (3840×2160) project, plus
tests/e2e/responsive.spec.ts:4k:overrides in place theh2measured 72px.A test that had never run
Adding those two projects surfaced one.
should show side ads on desktop after delayrequires a viewport of at least 1536px and no project was ever that wide, so it had always taken its early-exit path. Running for the first time, it failed: the workflow setsNEXT_PUBLIC_ENABLE_ADSbut never setNEXT_PUBLIC_ADSENSE_ID, andAdManagerrenders nothing without an ad client. Supplying a placeholder id makes the assertion real.