fix: improve cte review presentation

This commit is contained in:
User
2026-07-14 15:08:10 +02:00
parent 27af6733c8
commit 18701f020e
6 changed files with 147 additions and 75 deletions
@@ -169,30 +169,30 @@ Expected: PASS.
- `SqlViewer({ blocks })` shows the layout toggle only when `blocks.length > 1`.
- CTE plan data shape remains unchanged.
- [ ] **Step 1: Write failing semantic/layout tests**
- [x] **Step 1: Write failing semantic/layout tests**
Assert long filter data is rendered in distinct elements labeled Column, Operator, and Value;
assert card sections expose stable headings. Assert a one-block SQL viewer has no Horizontal or
Vertical controls while a two-block viewer retains both.
- [ ] **Step 2: Run tests and verify RED**
- [x] **Step 2: Run tests and verify RED**
Run: `cd frontend && npx vitest run src/viewers/CtePlanViewer.test.tsx src/viewers/SqlViewer.test.tsx src/viewers/CteResultViewer.test.tsx`
Expected: structured filter labels are absent and the one-block toggle is present.
- [ ] **Step 3: Implement responsive CTE cards**
- [x] **Step 3: Implement responsive CTE cards**
Use a bordered header grid, prose blocks with `leading-relaxed`, metadata rows with fixed labels,
`break-words`/`font-mono` for physical identifiers, and a responsive filter grid such as
`grid-cols-1 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)]`. Keep output columns wrapping.
- [ ] **Step 4: Hide the single-block toggle**
- [x] **Step 4: Hide the single-block toggle**
Wrap the layout control in `{blocks.length > 1 && (...)}` without changing multi-block state or
rendering.
- [ ] **Step 5: Run targeted tests and typecheck**
- [x] **Step 5: Run targeted tests and typecheck**
Run: `cd frontend && npx vitest run src/viewers/CtePlanViewer.test.tsx src/viewers/SqlViewer.test.tsx src/viewers/CteResultViewer.test.tsx && npx tsc -b`