7d602f7ea8
`--card-poster-max-height` is a fixed height, so it stops scaling with the card: held to 220px, a 16:9 thumbnail is 391px wide, and any card wider than that centred it with empty panel on both sides. That is every video card at one column -- a phone, or any window under about 456px of content width. The cap is now `max(var(--card-poster-max-height), 56.25cqw)` with the poster band as the query container. 56.25cqw is nine sixteenths of the card: exactly the height of a 16:9 image that fills the width, and the same number states the rule for every other ratio -- a poster may be as tall as a 16:9 slice of this card and no taller. So a portrait book cover still reads as a band rather than a column, and now grows with the card instead of stopping at 220px. `max()` rather than `min()` so the floor wins on a narrow card. The gap pre-dated the interface scale, below about 414px, but the scale widened the range it shows in: the track minimum went from 200px to 220px, so one column now starts at 456px of content width instead of 414. Every existing poster case mounted a 233px card, which is why the wide card's own failure went unseen for the whole migration. Two cases added on a 451px card: a landscape poster reaches the edges, and a portrait cover stays a band. Three tests carried a hardcoded px expectation, which is a hidden assertion that the interface scale is 1. All three failed at 1.1, in names that said nothing about size -- and I did not catch them because I ran jest and the build for the scale change but not cypress, which AGENTS.md asks for on frontend work: - `cardPosterCap()` read `--card-poster-max-height` with parseFloat. The cap is rem now, so it returned 12.5 and failed a within(80, 240) bound -- taking five poster tests with it. It resolves through the root font-size and checks the unit. - `inNarrowColumn` was a fixed 340px, chosen to hold two 150px statistic tracks. At 165px tracks it became one column, so a test about the gap BETWEEN columns had no second column. It is now 340px times the scale, because "narrow" means narrow relative to the type. - The APIButton size test asserted 36px for `small`. It now measures against a real `sm` button, which is the claim it was making -- that `small` resolves to `sm` -- and holds at any scale. A `uiScale()` helper reads the token so no further test has to name a pixel count. Verified: ui-layout 248 passing, 0 failing; 1141 jest tests / 65 suites; clean build; browser-checked at 400/451/500/700/1200px of grid width, no side gap at any of them. The 12 remaining component failures are the pre-existing Semantic-era selector failures in Tags, Channels, Download and Inventory. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| cypress | ||
| public | ||
| scripts | ||
| src | ||
| .gitignore | ||
| cypress.config.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| serve.json | ||
| tsconfig.json | ||
Getting Started with Create React App
This project was bootstrapped with Create React App.
Available Scripts
In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more
information.
npm run build
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you eject, you can't go back!
If you aren't satisfied with the build tool and configuration choices, you can eject at any time. This command will
remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right
into your project so you have full control over them. All of the commands except eject will still work, but they will
point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use eject. The curated feature set is suitable for small and middle deployments, and you
shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't
customize it when you are ready for it.
Learn More
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
npm run build fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify