diff --git a/docs/plans/2026-06-27-001-fix-ssr-modal-regressions-plan.md b/docs/plans/2026-06-27-001-fix-ssr-modal-regressions-plan.md index f8b3b7b9..3677aeae 100644 --- a/docs/plans/2026-06-27-001-fix-ssr-modal-regressions-plan.md +++ b/docs/plans/2026-06-27-001-fix-ssr-modal-regressions-plan.md @@ -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 `
    ` 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 diff --git a/src/clj/auto_ap/ssr/admin/clients.clj b/src/clj/auto_ap/ssr/admin/clients.clj index 9bf9024c..62d2e7ca 100644 --- a/src/clj/auto_ap/ssr/admin/clients.clj +++ b/src/clj/auto_ap/ssr/admin/clients.clj @@ -501,14 +501,14 @@ (defn- client-timeline [active] (let [steps ["Info" "Matches" "Contact" "Bank Accounts" "Integrations" "Cash Flow" "Other Settings"] active-index (.indexOf steps active)] - (timeline/timeline + (timeline/vertical-timeline {} (for [[n i] (map vector steps (range))] - (timeline/timeline-step (cond-> {} - (= i active-index) (assoc :active? true) - (< i active-index) (assoc :visited? true) - (= i (dec (count steps))) (assoc :last? true)) - n))))) + (timeline/vertical-timeline-step (cond-> {} + (= i active-index) (assoc :active? true) + (< i active-index) (assoc :visited? true) + (= i (dec (count steps))) (assoc :last? true)) + n))))) (defn- step-card "A wizard step's modal card: header (title + client-name chip), a side timeline, the body, diff --git a/src/clj/auto_ap/ssr/admin/vendors.clj b/src/clj/auto_ap/ssr/admin/vendors.clj index aa9faf94..9fa67acb 100644 --- a/src/clj/auto_ap/ssr/admin/vendors.clj +++ b/src/clj/auto_ap/ssr/admin/vendors.clj @@ -357,14 +357,14 @@ (defn- vendor-timeline [active] (let [steps ["Info" "Terms" "Account" "Address" "Legal"] active-index (.indexOf steps active)] - (timeline/timeline + (timeline/vertical-timeline {} (for [[n i] (map vector steps (range))] - (timeline/timeline-step (cond-> {} - (= i active-index) (assoc :active? true) - (< i active-index) (assoc :visited? true) - (= i (dec (count steps))) (assoc :last? true)) - n))))) + (timeline/vertical-timeline-step (cond-> {} + (= i active-index) (assoc :active? true) + (< i active-index) (assoc :visited? true) + (= i (dec (count steps))) (assoc :last? true)) + n))))) (defn- step-card "A wizard step's modal card: header (title + the vendor name chip), a side timeline, the @@ -390,7 +390,7 @@ (step-card {:title "Basic Info" :active "Info" :all-data (merge all-data data) :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)})) (com/validated-field {:label "Name" :errors (ferr :vendor/name)} @@ -492,7 +492,7 @@ (step-card {:title "Terms" :active "Terms" :all-data all-data :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 {:label "Terms" :errors (ferr :vendor/terms)} [:div.flex.items-baseline.gap-x-4 @@ -525,7 +525,7 @@ (step-card {:title "Account Assignments" :active "Account" :all-data all-data :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 {:label "Default Account" :errors (ferr :vendor/default-account)} (com/typeahead {:name "vendor/default-account" @@ -552,7 +552,7 @@ (step-card {:title "Address" :active "Address" :all-data all-data :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 (when (:db/id addr) (com/hidden {:name (an :db/id) :value (:db/id addr)})) (com/validated-field @@ -580,7 +580,7 @@ (step-card {:title "Legal Entity" :active "Legal" :all-data all-data :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.col-span-6 (com/validated-field