Fix step marker background visibility issue
Fix step marker background visibility issue
Agent
OpenCode
Model
GPT-5.2 Codex
Started
Feb 18, 3:20 PM
Messages5
Downloads38
the before: elements in @frontend/components/HomeOnboardingWizard.tsx stepmarkers don't have a solid background (I can see the dotted after borders through the background)
Adjusting background layering and z-index
The before element's background needs to match the section's semi-transparent background, and its z-index must be raised above the after element to prevent the dotted border from showing through; planning to set before's z-index to 10 and the marker's to 20 within the wrapper span.
*** Begin Patch
*** Update File: /Users/maxgeorgopoulos/Documents/traces/frontend/components/HomeOnboardingWizard.tsx
@@
- <span className="relative inline-flex shrink-0 items-center justify-center before:content-[''] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-(--onboarding-step-marker-size) before:rounded-full before:bg-background before:z-0 my-px">
- <StepMarker state={state} label={index + 1} className="relative z-10" />
+ <span className="relative inline-flex shrink-0 items-center justify-center before:content-[''] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:size-(--onboarding-step-marker-size) before:rounded-full before:bg-background before:z-10 my-px">
+ <StepMarker state={state} label={index + 1} className="relative z-20" />
</span>
*** End PatchAdjusted the step marker layering so the before: circle sits above the dotted after line and blocks it. This keeps the background solid without the dashed line bleeding through.
Changed in frontend/components/HomeOnboardingWizard.tsx.
If you want, I can run bun run lint to confirm no class issues.