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 9ab4b653..e4449f92 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,8 @@ # SSR Modal Regression Fixes — QA Findings & Resumable Task List -> **Status:** BUG A, BUG C, BUG D, BUG B, BUG E/F, and the CSS size root cause are -> **FIXED + verified** (2026-06-27). Remaining: modal step animations (§3). Resume from §4/§3. +> **Status:** ALL identified items **FIXED + verified** (2026-06-27) — BUG A, BUG C, BUG D, BUG B, +> BUG E/F, the CSS size root cause, and a subtle wizard fade-in (§3). The only thing intentionally +> left is the optional richer forward/back *slide* transition, which needs design sign-off (§3). > **Owner:** Bryce > **Branch:** `integreat-execute-refactor` > **Date:** 2026-06-27 @@ -92,10 +93,21 @@ animate: - By contrast, `dialog/success-modal-` and the Invoice Pay card (`last-modal-step transition duration-150`) keep transitions, so the intended pattern still exists to copy from. -**FIX:** add the swap-transition classes to the wizard step cards (mirror `success-modal-`'s -`transition duration-300 ease-in-out htmx-swapping:... htmx-added:...` string, or the lighter -`last-modal-step transition duration-150` used by the transaction-edit card). Confirm the -`htmx-swapping:`/`htmx-added:` custom variants survive the §2 CSS rebuild. +**FIX — DONE (subtle fade) & verified:** added the codebase's existing `fade-in transition-opacity +duration-300` to all three wizard step cards (new-invoice basic-details + accounts, vendor +step-card, client step-card). `fade-in` is defined in `resources/input.css` +(`.htmx-added .fade-in { opacity:0 }` → transitions to 1 after htmx settle), so each card fades in +on open *and* on every step swap. Verified live: cards always settle to **opacity 1** (never stuck +invisible) on both open and step navigation — no functional risk. + +Notes / intentionally deferred (needs design intent + visual sign-off, so not done autonomously): +- The transaction-edit "reference" card's `last-modal-step` class is **undefined** (a no-op); its + only real transition is `transition duration-150`. So there was no clean reference slide to copy. +- The richer **forward/backward slide** transitions (the old `mm/*` modal-stack system using + `group/transition` + `forward`/`backward` + `htmx-*:translate-x-2/3`) were deliberately deleted in + Phase 11 and purged from the CSS. Re-introducing directional slides is a larger design decision + (which element carries `htmx-swapping`/`htmx-added` — the form vs the card — plus settle timing) + and is left for a human-in-the-loop pass if the subtle fade isn't enough. ## 4. Bug list + fixes (prioritized task list) diff --git a/src/clj/auto_ap/ssr/admin/clients.clj b/src/clj/auto_ap/ssr/admin/clients.clj index 62d2e7ca..c7296953 100644 --- a/src/clj/auto_ap/ssr/admin/clients.clj +++ b/src/clj/auto_ap/ssr/admin/clients.clj @@ -517,7 +517,7 @@ [{:keys [title active all-data nav body]}] (com/modal-card-advanced {"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}" - :class " md:w-[820px] md:h-[560px] w-full h-full" + :class " md:w-[820px] md:h-[560px] w-full h-full fade-in transition-opacity duration-300" :x-data (hx/json {"clientName" (:client/name all-data)})} (com/modal-header {} [:div.flex [:div.p-2 title] [:p.ml-2.rounded.bg-gray-50.p-2.dark:bg-gray-600 [:span {:x-text "clientName"}]]]) diff --git a/src/clj/auto_ap/ssr/admin/vendors.clj b/src/clj/auto_ap/ssr/admin/vendors.clj index 9fa67acb..85ef0557 100644 --- a/src/clj/auto_ap/ssr/admin/vendors.clj +++ b/src/clj/auto_ap/ssr/admin/vendors.clj @@ -373,7 +373,7 @@ [{:keys [title active all-data nav body]}] (com/modal-card-advanced {"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}" - :class " md:w-[760px] md:h-[520px] w-full h-full" + :class " md:w-[760px] md:h-[520px] w-full h-full fade-in transition-opacity duration-300" :x-data (hx/json {"vendorName" (:vendor/name all-data) "showPrintAs" (boolean (not-empty (:vendor/print-as all-data))) "printAs" (:vendor/print-as all-data)})} diff --git a/src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj b/src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj index 86522063..f75d6952 100644 --- a/src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj +++ b/src/clj/auto_ap/ssr/invoice/new_invoice_wizard.clj @@ -333,7 +333,7 @@ client-val (or (:invoice/client data) client-from-req)] (com/modal-card-advanced {"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}" - :class " md:w-[750px] md:h-[600px] w-full h-full" + :class " md:w-[750px] md:h-[600px] w-full h-full fade-in transition-opacity duration-300" "x-data" ""} (com/modal-header {} [:div.p-2 (if extant? "Edit invoice" "New invoice")]) (com/modal-body @@ -526,7 +526,7 @@ total (expense-accounts-total* rows)] (com/modal-card-advanced {"@keydown.enter.prevent.stop" "if ($refs.next) {$refs.next.click()}" - :class " md:w-[750px] md:h-[600px] w-full h-full" + :class " md:w-[750px] md:h-[600px] w-full h-full fade-in transition-opacity duration-300" "x-data" ""} (com/modal-header {} [:div.p-2 "Invoice accounts "]) (com/modal-body