fix: reset conclusion map on mobile
This commit is contained in:
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user