LaLeV/wacrm
1
0
Fork 0
mirror of https://github.com/Luchexx/wacrm.git synced 2026-11-02 09:19:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #130 from ArnasDon/fix/flows-sticky-validation

Browse Source 
fix(flows): pin validation panel to viewport bottom while editing
This commit is contained in:
Arnas Donauskas 2026-05-22 16:21:26 +03:00 committed by GitHub
commit 6522b9b485
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/flows/flow-builder.tsx
View File

@ -657,7 +657,14 @@ export function FlowBuilder({ initialFlow, initialNodes }: FlowBuilderProps) {
)} )}
</section> </section>
<ValidationPanel issues={issues} onJump={jumpToNode} /> {/* Sticky-bottom so the activate-readiness status follows the
user as they scroll through nodes. The parent <main> in the
dashboard shell is the scroll container; this stays pinned
to the viewport bottom (with a 1rem gap) until the page
naturally ends, at which point it falls back into flow. */}
<div className="sticky bottom-4 z-10 shadow-xl shadow-slate-950/60">
<ValidationPanel issues={issues} onJump={jumpToNode} />
</div>
</div> </div>
); );
} }
@ -2041,9 +2048,12 @@ function ValidationPanel({
onJump: (key: string) => void; onJump: (key: string) => void;
}) { }) {
if (issues.length === 0) { if (issues.length === 0) {
// Slate-950 base + emerald accents so the panel stays readable when
// sticky-positioned over scrolled-behind node cards (a translucent
// bg-emerald-500/10 would bleed through ugly).
return ( return (
<div className="flex items-center gap-2 rounded-lg border border-emerald-600/40 bg-emerald-500/10 p-3 text-xs text-emerald-300"> <div className="flex items-center gap-2 rounded-lg border border-emerald-600/50 bg-slate-950 p-3 text-sm font-medium text-emerald-300">
<CircleCheck className="h-4 w-4" /> <CircleCheck className="h-4 w-4 shrink-0" />
No issues. Ready to activate. No issues. Ready to activate.
</div> </div>
); );
@ -2051,7 +2061,12 @@ function ValidationPanel({
const errors = issues.filter((i) => i.severity === "error"); const errors = issues.filter((i) => i.severity === "error");
const warnings = issues.filter((i) => i.severity === "warning"); const warnings = issues.filter((i) => i.severity === "warning");
return ( return (
<div className="rounded-lg border border-slate-800 bg-slate-900 p-3"> <div
className={cn(
"rounded-lg border bg-slate-950 p-3",
errors.length > 0 ? "border-red-500/40" : "border-amber-500/40",
)}
>
<div className="mb-2 flex items-center gap-2 text-xs text-slate-400"> <div className="mb-2 flex items-center gap-2 text-xs text-slate-400">
{errors.length > 0 ? ( {errors.length > 0 ? (
<CircleAlert className="h-4 w-4 text-red-400" /> <CircleAlert className="h-4 w-4 text-red-400" />