29105da2b6
Six keyboard-shortcuts e2e tests started failing on CI: clicking the search glyph was refused because a `mantine-Notification-title` was on top of it. The toast container is fixed at `top: var(--mantine-spacing-md)` -- 16px -- while the bar occupies the first 54px of the page. Every toast has therefore been landing on the bar's right-hand corner: the search glyph, the hamburger, Help and Admin. For as long as the toast is up those controls cannot be clicked, and an error toast is precisely the moment a user reaches for Admin. It surfaced now because the previous commit gave the search glyph a proper hit area. At 18px it sat in the gap beneath the toast; grown to the height of the bar, it moved into the overlap. The toast has been covering that corner all along -- there was nothing there to hit. So this is not a test that needs loosening: CI found a real defect that predates the change that exposed it. Toasts now start below the bar. `--navbar-height` is shared between the bar's min-height and the offset so the two cannot drift, and the rule matches `[data-position^='top']` so a future move to bottom-right does not silently inherit a top offset. Mantine's own positioning uses `:where()`, which has zero specificity, so a single class wins. Tested by `elementFromPoint` rather than by comparing rectangles: that is the question Cypress's actionability check asks and the one a mouse asks. A geometry test would miss a toast that overlaps but sits behind, and a z-index test would miss one that is in front but elsewhere on screen. Three cases -- the search control, every control in the corner, and the offset itself, which is stated separately because the first two would also pass on a toast that merely happened to be narrow enough to miss at one viewport. Removing the offset reddens all three. Confirmed on the running app with a real error toast up: toast top 70px, bar bottom 54px, all six corner controls topmost at their own centres. The e2e spec passes locally, 12 of 12. 1124 jest / 62 suites, 199 in ui-layout.cy.js, clean npm run build. |
||
|---|---|---|
| .. | ||
| 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