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:
@@ -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,
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user