notid/integreat
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix(ssr): vendor + client wizard step layout (vertical timeline)

Browse Source 
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:
Bryce
2026-06-27 13:18:27 -07:00
parent 74f1a49a10
commit da2cc711d4
3 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/plans/2026-06-27-001-fix-ssr-modal-regressions-plan.md
View File

@@ -1,7 +1,7 @@
# SSR Modal Regression Fixes — QA Findings & Resumable Task List # 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). > **Status:** BUG A, BUG C, BUG E/F, and the CSS size root cause are **FIXED + verified live**
> Remaining: BUG E/F (wizard inner layout), animations (§3), BUG D/B. Resume from §4. > (2026-06-27). Remaining: animations (§3), BUG D, BUG B. Resume from §4.
> **Owner:** Bryce > **Owner:** Bryce
> **Branch:** `integreat-execute-refactor` > **Branch:** `integreat-execute-refactor`
> **Date:** 2026-06-27 > **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. **§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 **BUG E/F — Vendor + Client wizard step layout overflows the card** — **DONE & verified live.**
card is correct (760×520), but the migrated step bodies keep the old fixed `w-[600px] h-[350px]` - **Actual root cause (found while fixing):** `step-card` places the step timeline in a *vertical*
wrappers (from when each step was its own modal card), causing a horizontal scrollbar, a clipped left sidebar (`grow-0 ... self-stretch hidden md:block`), but `vendor-timeline`/`client-timeline`
"Name" field, a detached "Basic Info" header box, and a large empty left region. rendered the **horizontal** `timeline/timeline` component. A horizontal `<ol>` in a shrink-to-fit
- File: `src/clj/auto_ap/ssr/admin/vendors.clj` — step bodies at ~393/495/528/555/583. sidebar forced the sidebar to ~full card width, pushing the body off-screen → horizontal scroll,
- **FIX:** drop the per-step `w-[600px] h-[350px]` wrappers; let the step body fill the engine's clipped fields, the "huge grey left region". (Vendor additionally pinned its bodies to a fixed
outer card (responsive `w-full` + flex column, like the New Invoice steps). `w-[600px]`, compounding it.)
- **FIX applied:**
**BUG F — Client wizard: same inner-layout overflow** (worse — step progress bar + fields clipped, - `vendors.clj` `vendor-timeline` + `clients.clj` `client-timeline`: use
horizontal scroll, detached "Info" header). Outer card correct (820×560) after rebuild. `timeline/vertical-timeline` + `timeline/vertical-timeline-step` (the components already existed)
- File: `src/clj/auto_ap/ssr/admin/clients.clj` — step bodies (info step ~1426 etc.). instead of the horizontal pair.
- **FIX:** same as BUG E — rework migrated step bodies to fill the outer card. - `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 ### P2 — robustness / cosmetic

12
src/clj/auto_ap/ssr/admin/clients.clj
View File

@@ -501,14 +501,14 @@
(defn- client-timeline [active] (defn- client-timeline [active]
(let [steps ["Info" "Matches" "Contact" "Bank Accounts" "Integrations" "Cash Flow" "Other Settings"] (let [steps ["Info" "Matches" "Contact" "Bank Accounts" "Integrations" "Cash Flow" "Other Settings"]
active-index (.indexOf steps active)] active-index (.indexOf steps active)]
(timeline/timeline (timeline/vertical-timeline
{} {}
(for [[n i] (map vector steps (range))] (for [[n i] (map vector steps (range))]
(timeline/timeline-step (cond-> {} (timeline/vertical-timeline-step (cond-> {}
(= i active-index) (assoc :active? true) (= i active-index) (assoc :active? true)
(< i active-index) (assoc :visited? true) (< i active-index) (assoc :visited? true)
(= i (dec (count steps))) (assoc :last? true)) (= i (dec (count steps))) (assoc :last? true))
n))))) n)))))
(defn- step-card (defn- step-card
"A wizard step's modal card: header (title + client-name chip), a side timeline, the body, "A wizard step's modal card: header (title + client-name chip), a side timeline, the body,

22
src/clj/auto_ap/ssr/admin/vendors.clj
View File

@@ -357,14 +357,14 @@
(defn- vendor-timeline [active] (defn- vendor-timeline [active]
(let [steps ["Info" "Terms" "Account" "Address" "Legal"] (let [steps ["Info" "Terms" "Account" "Address" "Legal"]
active-index (.indexOf steps active)] active-index (.indexOf steps active)]
(timeline/timeline (timeline/vertical-timeline
{} {}
(for [[n i] (map vector steps (range))] (for [[n i] (map vector steps (range))]
(timeline/timeline-step (cond-> {} (timeline/vertical-timeline-step (cond-> {}
(= i active-index) (assoc :active? true) (= i active-index) (assoc :active? true)
(< i active-index) (assoc :visited? true) (< i active-index) (assoc :visited? true)
(= i (dec (count steps))) (assoc :last? true)) (= i (dec (count steps))) (assoc :last? true))
n))))) n)))))
(defn- step-card (defn- step-card
"A wizard step's modal card: header (title + the vendor name chip), a side timeline, the "A wizard step's modal card: header (title + the vendor name chip), a side timeline, the
@@ -390,7 +390,7 @@
(step-card (step-card
{:title "Basic Info" :active "Info" :all-data (merge all-data data) {:title "Basic Info" :active "Info" :all-data (merge all-data data)
:nav (wizard2/nav-footer {:next "Terms"}) :nav (wizard2/nav-footer {:next "Terms"})
:body [:div.space-y-1.mt-4 {:class "w-[600px] h-[350px]"} :body [:div.space-y-1.mt-4 {:class "w-full h-[350px]"}
(when (:db/id data) (com/hidden {:name "db/id" :value (:db/id data)})) (when (:db/id data) (com/hidden {:name "db/id" :value (:db/id data)}))
(com/validated-field (com/validated-field
{:label "Name" :errors (ferr :vendor/name)} {:label "Name" :errors (ferr :vendor/name)}
@@ -492,7 +492,7 @@
(step-card (step-card
{:title "Terms" :active "Terms" :all-data all-data {:title "Terms" :active "Terms" :all-data all-data
:nav (wizard2/nav-footer {:back? true :next "Account"}) :nav (wizard2/nav-footer {:back? true :next "Account"})
:body [:div.space-y-1 {:class "w-[600px] h-[350px]"} :body [:div.space-y-1 {:class "w-full h-[350px]"}
(com/validated-field (com/validated-field
{:label "Terms" :errors (ferr :vendor/terms)} {:label "Terms" :errors (ferr :vendor/terms)}
[:div.flex.items-baseline.gap-x-4 [:div.flex.items-baseline.gap-x-4
@@ -525,7 +525,7 @@
(step-card (step-card
{:title "Account Assignments" :active "Account" :all-data all-data {:title "Account Assignments" :active "Account" :all-data all-data
:nav (wizard2/nav-footer {:back? true :next "Address"}) :nav (wizard2/nav-footer {:back? true :next "Address"})
:body [:div.space-y-1 {:class "w-[600px] h-[350px] "} :body [:div.space-y-1 {:class "w-full h-[350px] "}
(com/validated-field (com/validated-field
{:label "Default Account" :errors (ferr :vendor/default-account)} {:label "Default Account" :errors (ferr :vendor/default-account)}
(com/typeahead {:name "vendor/default-account" (com/typeahead {:name "vendor/default-account"
@@ -552,7 +552,7 @@
(step-card (step-card
{:title "Address" :active "Address" :all-data all-data {:title "Address" :active "Address" :all-data all-data
:nav (wizard2/nav-footer {:back? true :next "Legal"}) :nav (wizard2/nav-footer {:back? true :next "Legal"})
:body [:div.space-y-1 {:class "w-[600px] h-[350px]"} :body [:div.space-y-1 {:class "w-full h-[350px]"}
[:div.flex.flex-col.w-full [:div.flex.flex-col.w-full
(when (:db/id addr) (com/hidden {:name (an :db/id) :value (:db/id addr)})) (when (:db/id addr) (com/hidden {:name (an :db/id) :value (:db/id addr)}))
(com/validated-field (com/validated-field
@@ -580,7 +580,7 @@
(step-card (step-card
{:title "Legal Entity" :active "Legal" :all-data all-data {:title "Legal Entity" :active "Legal" :all-data all-data
:nav (wizard2/nav-footer {:back? true :save? true}) :nav (wizard2/nav-footer {:back? true :save? true})
:body [:div {:class "w-[600px] h-[350px]"} :body [:div {:class "w-full h-[350px]"}
[:div.grid.grid-cols-6.gap-x-4.gap-y-2 [:div.grid.grid-cols-6.gap-x-4.gap-y-2
[:div.col-span-6 [:div.col-span-6
(com/validated-field (com/validated-field