fix(ssr): vendor + client wizard step layout (vertical timeline)
BUG E/F: the Vendor and Client wizard step cards overflowed — horizontal scrollbar, clipped fields, a huge empty grey left region. The step-card lays the step timeline in a vertical left sidebar (grow-0, self-stretch), but vendor-timeline/client-timeline rendered the HORIZONTAL `timeline` component, which forced the shrink-to-fit sidebar to ~full card width and pushed the body off-screen. - vendor-timeline / client-timeline: use timeline/vertical-timeline + vertical-timeline-step (the components already existed) instead of the horizontal pair. - vendors.clj: step bodies w-[600px] h-[350px] -> w-full h-[350px] so the body fills the width left of the now-narrow vertical timeline. Verified live (agent-browser): Vendor 760x520, Client 820x560, vertical timeline, no horizontal overflow, Info->Terms navigation + validation re-render lay out correctly. Both files pass lein cljfmt check. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
# SSR Modal Regression Fixes — QA Findings & Resumable Task List
|
||||
|
||||
> **Status:** BUG A, BUG C, and the CSS size root cause are **FIXED + verified live** (2026-06-27).
|
||||
> Remaining: BUG E/F (wizard inner layout), animations (§3), BUG D/B. Resume from §4.
|
||||
> **Status:** BUG A, BUG C, BUG E/F, and the CSS size root cause are **FIXED + verified live**
|
||||
> (2026-06-27). Remaining: animations (§3), BUG D, BUG B. Resume from §4.
|
||||
> **Owner:** Bryce
|
||||
> **Branch:** `integreat-execute-refactor`
|
||||
> **Date:** 2026-06-27
|
||||
@@ -144,18 +144,25 @@ match.** (HIGH severity — breaks the flagship modal's core swap doctrine.)
|
||||
|
||||
**§2 CSS rebuild** — do first; fixes Vendor/Client/Invoice-Pay widths.
|
||||
|
||||
**BUG E — Vendor wizard: inner step bodies overflow the card.** After the CSS rebuild the outer
|
||||
card is correct (760×520), but the migrated step bodies keep the old fixed `w-[600px] h-[350px]`
|
||||
wrappers (from when each step was its own modal card), causing a horizontal scrollbar, a clipped
|
||||
"Name" field, a detached "Basic Info" header box, and a large empty left region.
|
||||
- File: `src/clj/auto_ap/ssr/admin/vendors.clj` — step bodies at ~393/495/528/555/583.
|
||||
- **FIX:** drop the per-step `w-[600px] h-[350px]` wrappers; let the step body fill the engine's
|
||||
outer card (responsive `w-full` + flex column, like the New Invoice steps).
|
||||
|
||||
**BUG F — Client wizard: same inner-layout overflow** (worse — step progress bar + fields clipped,
|
||||
horizontal scroll, detached "Info" header). Outer card correct (820×560) after rebuild.
|
||||
- File: `src/clj/auto_ap/ssr/admin/clients.clj` — step bodies (info step ~1426 etc.).
|
||||
- **FIX:** same as BUG E — rework migrated step bodies to fill the outer card.
|
||||
**BUG E/F — Vendor + Client wizard step layout overflows the card** — **DONE & verified live.**
|
||||
- **Actual root cause (found while fixing):** `step-card` places the step timeline in a *vertical*
|
||||
left sidebar (`grow-0 ... self-stretch hidden md:block`), but `vendor-timeline`/`client-timeline`
|
||||
rendered the **horizontal** `timeline/timeline` component. A horizontal `<ol>` in a shrink-to-fit
|
||||
sidebar forced the sidebar to ~full card width, pushing the body off-screen → horizontal scroll,
|
||||
clipped fields, the "huge grey left region". (Vendor additionally pinned its bodies to a fixed
|
||||
`w-[600px]`, compounding it.)
|
||||
- **FIX applied:**
|
||||
- `vendors.clj` `vendor-timeline` + `clients.clj` `client-timeline`: use
|
||||
`timeline/vertical-timeline` + `timeline/vertical-timeline-step` (the components already existed)
|
||||
instead of the horizontal pair.
|
||||
- `vendors.clj`: the 5 step bodies' `w-[600px] h-[350px]` → `w-full h-[350px]` so the body fills
|
||||
the remaining width next to the now-narrow vertical timeline.
|
||||
- **Verified live:** Vendor 760×520 and Client 820×560 with a proper vertical timeline, **no
|
||||
horizontal overflow**, fields fill the body; forward nav (Info→Terms) works, the vendor-name chip
|
||||
renders, and the validation-error re-render also lays out correctly.
|
||||
- Note: edits made with the plain `Edit` tool (exact-string) — the clojure-mcp editors reformat the
|
||||
whole file against a stricter config than the project's `lein cljfmt`, producing large spurious
|
||||
diffs; both files pass `lein cljfmt check`.
|
||||
|
||||
### P2 — robustness / cosmetic
|
||||
|
||||
|
||||
Reference in New Issue
Block a user