fix: reset conclusion map on mobile

This commit is contained in:
lda
2026-07-10 18:50:48 +07:00 Verified
parent 966837713b
commit 6b78ce819b
3 changed files with 65 additions and 1 deletions
+48
View File
@@ -124,3 +124,51 @@ $ tsc -b --pretty false
git diff --check git diff --check
passed passed
``` ```
## Final Responsive Fix
### RED
Command:
```text
pnpm --dir web --filter @lda/console test -- src/presentation/presentation-css.test.ts
```
Result:
```text
Test Files 1 failed (1)
Tests 1 failed, 4 passed (5)
```
The failure was the missing 640px explicit placement reset and stale generic connector selector.
### GREEN
Command:
```text
pnpm --dir web --filter @lda/console test -- src/presentation/presentation-css.test.ts
```
Result:
```text
Test Files 1 passed (1)
Tests 5 passed (5)
```
### Final Verification
```text
pnpm --dir web --filter @lda/console test -- src/presentation/conclusion/conclusion-model.test.ts src/presentation/conclusion/ConclusionScene.test.tsx
Test Files 2 passed (2)
Tests 12 passed (12)
pnpm --dir web --filter @lda/console typecheck
$ tsc -b --pretty false
git diff --check
passed
```
@@ -34,4 +34,11 @@ describe("presentation.css", () => {
expect(css).toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--text-secondary\);/s); expect(css).toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--text-secondary\);/s);
expect(css).not.toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--accent-cyan\);/s); expect(css).not.toMatch(/\.conclusion-map__future svg\s*\{[^}]*color: var\(--accent-cyan\);/s);
}); });
it("resets conclusion node placement and keeps connectors node-specific on narrow screens", () => {
expect(css).toMatch(
/@media \(max-width: 640px\) \{[\s\S]*?\.conclusion-map__node--planner,\s*\.conclusion-map__node--substrate,\s*\.conclusion-map__node--runtime,\s*\.conclusion-map__node--evidence\s*\{\s*grid-column: auto;\s*grid-row: auto;/,
);
expect(css).not.toContain(".conclusion-map__node:not(:last-child)::after");
});
}); });
@@ -392,7 +392,16 @@
@media (max-width: 640px) { @media (max-width: 640px) {
.conclusion-map__flow { grid-template-columns: 1fr; gap: 0.85rem; } .conclusion-map__flow { grid-template-columns: 1fr; gap: 0.85rem; }
.conclusion-map__node:not(:last-child)::after { .conclusion-map__node--planner,
.conclusion-map__node--substrate,
.conclusion-map__node--runtime,
.conclusion-map__node--evidence {
grid-column: auto;
grid-row: auto;
}
.conclusion-map__node--planner::after,
.conclusion-map__node--substrate::after {
top: auto; top: auto;
right: 50%; right: 50%;
bottom: -0.85rem; bottom: -0.85rem;