root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(FN-001): update stale mobile-scroll-snap test and add AGENTS.md pitfall note

Browse Source
This commit is contained in:
Fusion
2026-05-12 22:06:50 +08:00
committed by Berlin Luk
parent a79dbfcba0
commit f509ed0f87
2 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
AGENTS.md
View File

@@ -889,3 +889,4 @@ Cards have `--focus-ring-strong` focus style and `--card-hover` background on ho
- **CSS regex tests in test files** — When changing mobile CSS values (e.g., `min-height`), update both the CSS and the corresponding test assertions. Use non-greedy `[^}]*` patterns for block-scoped regex, not `[\s\S]*` which can bleed across block boundaries. - **CSS regex tests in test files** — When changing mobile CSS values (e.g., `min-height`), update both the CSS and the corresponding test assertions. Use non-greedy `[^}]*` patterns for block-scoped regex, not `[\s\S]*` which can bleed across block boundaries.
- **BEM specificity conflicts** — When a container state class (`.quick-entry-box--expanded`) and an element modifier (`.quick-entry-input--expanded`) both target the same element, the container may win due to higher specificity. Use `:not(.modifier)` to scope container rules: `.quick-entry-box--expanded .quick-entry-input:not(.quick-entry-input--expanded)`. - **BEM specificity conflicts** — When a container state class (`.quick-entry-box--expanded`) and an element modifier (`.quick-entry-input--expanded`) both target the same element, the container may win due to higher specificity. Use `:not(.modifier)` to scope container rules: `.quick-entry-box--expanded .quick-entry-input:not(.quick-entry-input--expanded)`.
- **CSS in `@media` blocks** — Don't search backwards for the nearest `@media` to check if a rule is mobile-scoped. Track brace depth to confirm the line is inside the block. Many components are defined globally even if they only visually appear on mobile. - **CSS in `@media` blocks** — Don't search backwards for the nearest `@media` to check if a rule is mobile-scoped. Track brace depth to confirm the line is inside the block. Many components are defined globally even if they only visually appear on mobile.
- **Mobile board view-switch scroll-snap pitfall (FN-001)** — `scroll-snap-type: x mandatory` on mobile `.board` can cause iOS Safari to compress the viewport into a corner when switching from ListView because stale layout measurements are snapped before flex children resolve. Use `scroll-snap-type: x proximity` combined with `overflow-anchor: none` instead.

6
packages/dashboard/app/__tests__/mobile-scroll-snap.test.ts
View File

@@ -30,8 +30,8 @@ describe("scroll-snap CSS", () => {
); );
const afterMedia = css.slice(mediaStart); const afterMedia = css.slice(mediaStart);
it("contains scroll-snap-type: x mandatory", () => { it("contains scroll-snap-type: x proximity", () => {
expect(css).toContain("scroll-snap-type: x mandatory"); expect(css).toContain("scroll-snap-type: x proximity");
}); });
it("contains scroll-snap-align: center (not start)", () => { it("contains scroll-snap-align: center (not start)", () => {
@@ -53,7 +53,7 @@ describe("scroll-snap CSS", () => {
it("scroll-snap rules are inside a @media block", () => { it("scroll-snap rules are inside a @media block", () => {
expect(mediaStart).toBeGreaterThanOrEqual(0); expect(mediaStart).toBeGreaterThanOrEqual(0);
expect(afterMedia).toContain("scroll-snap-type: x mandatory"); expect(afterMedia).toContain("scroll-snap-type: x proximity");
expect(afterMedia).toContain("scroll-snap-align: center"); expect(afterMedia).toContain("scroll-snap-align: center");
}); });
}); });