designslife/WebForm-mw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact the journey rail to reclaim form width

Browse Source 
Gutter shrinks from md:pl-20 (80px) to md:pl-12 (48px) — a 32px (40%) gain
back to the form column. Markers, pulse halo, and 'Now' pill scale down to
match so the rail still reads at a glance:

- Marker container: -left-14 w-12 -> -left-9 w-7
- Past/future markers: h-6 -> h-5
- Current marker: h-7 ring-4 -> h-6 ring-2; rank label 11px -> 10px
- 'Now' pill: 9px -> 8px; tracking and offset re-balanced for the shorter
  drop from the smaller marker bottom
- Rail-pulse keyframe shadow radius: 8px -> 6px to suit the smaller disc
This commit is contained in:
Joel Brock
2026-05-11 13:37:28 -07:00
parent 9103ccaf9d
commit 762605f04b
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/globals.css
View File

@@ -151,7 +151,7 @@ input[type="date"]::-webkit-calendar-picker-indicator {
box-shadow: 0 0 0 0 oklch(72% 0.14 135 / 0.55);
}
60% {
box-shadow: 0 0 0 8px oklch(72% 0.14 135 / 0);
box-shadow: 0 0 0 6px oklch(72% 0.14 135 / 0);
}
}

18
components/EngagementForm.tsx
View File

@@ -299,7 +299,7 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
}} />
)}
<ol className="relative space-y-5 md:pl-20">
<ol className="relative space-y-5 md:pl-12">
{sectionsToRender.map((entry, i) => {
const { section, pathwayState, locked } = entry;
const nextState =
@@ -585,12 +585,12 @@ function RailMarker({
return (
<div
aria-hidden
className="pointer-events-none hidden md:block absolute -left-14 top-0 bottom-0 w-12"
className="pointer-events-none hidden md:block absolute -left-9 top-0 bottom-0 w-7"
>
{nextState && (
<span
className={
"absolute left-1/2 -translate-x-1/2 top-12 -bottom-11 " +
"absolute left-1/2 -translate-x-1/2 top-11 -bottom-11 " +
(nextState === "future"
? "w-0 border-l border-dashed border-rule"
: "w-px bg-leaf-500/70")
@@ -599,7 +599,7 @@ function RailMarker({
)}
<MarkerCircle rank={rank} state={state} />
{state === "current" && (
<span className="absolute left-1/2 -translate-x-1/2 top-[60px] whitespace-nowrap rounded-full bg-leaf-700 px-1.5 py-[1px] text-[9px] font-medium uppercase tracking-[0.12em] text-paper shadow-sm">
<span className="absolute left-1/2 -translate-x-1/2 top-[52px] whitespace-nowrap rounded-full bg-leaf-700 px-1.5 py-[1px] text-[8px] font-medium uppercase tracking-[0.1em] text-paper shadow-sm">
Now
</span>
)}
@@ -610,8 +610,8 @@ function RailMarker({
function MarkerCircle({ rank, state }: { rank: number; state: PathwayState }) {
if (state === "past") {
return (
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full bg-leaf-700 text-paper shadow-sm">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3">
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-5 w-5 items-center justify-center rounded-full bg-leaf-700 text-paper shadow-sm">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round" className="h-2.5 w-2.5">
<path d="M3 6.5l2 2 4-5" />
</svg>
<span className="sr-only">Stage {rank} (completed)</span>
@@ -620,15 +620,15 @@ function MarkerCircle({ rank, state }: { rank: number; state: PathwayState }) {
}
if (state === "current") {
return (
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-7 w-7 items-center justify-center rounded-full bg-leaf-700 text-paper text-[11px] font-semibold shadow-md ring-4 ring-leaf-100 motion-safe:animate-[rail-pulse_2.6s_ease-in-out_infinite]">
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full bg-leaf-700 text-paper text-[10px] font-semibold shadow-md ring-2 ring-leaf-100 motion-safe:animate-[rail-pulse_2.6s_ease-in-out_infinite]">
{rank}
<span className="sr-only">Stage {rank} (current)</span>
</span>
);
}
return (
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-6 w-6 items-center justify-center rounded-full border border-dashed border-rule bg-paper text-ink-mute">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3">
<span className="absolute left-1/2 -translate-x-1/2 top-6 inline-flex h-5 w-5 items-center justify-center rounded-full border border-dashed border-rule bg-paper text-ink-mute">
<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" className="h-2.5 w-2.5">
<rect x="2.5" y="5.5" width="7" height="5" rx="0.75" />
<path d="M4 5.5V4a2 2 0 0 1 4 0v1.5" />
</svg>