Onboarding dialog renders two overlapping close (×) buttons

[hotlong]

Problem

The Onboarding dialog displays two overlapping close (×) buttons in the upper-right corner (see screenshot below):

---

Cause

• The OnboardingWalkthrough component manually renders its own close button in the header:
  • <Button variant="ghost" size="icon" ...><X ... /></Button>
• The DialogContent component (from @object-ui/components) already includes a built-in close button positioned absolutely at the top-right corner.
• These two buttons appear at the same location, resulting in a duplicated UI control and confusion.

Example (from code):

// In OnboardingWalkthrough.tsx
<DialogHeader>
  <DialogTitle>...</DialogTitle>
  <Button ...><X ... /></Button> // Manually added close button
</DialogHeader>

// In DialogContent (auto-generated via Radix)
<DialogPrimitive.Close ...>
  <X ... />
</DialogPrimitive.Close>

Solution

• Remove the manually rendered close button from the OnboardingWalkthrough's DialogHeader, as DialogContent already provides an accessible close control.
• Verify that dismissing the dialog still works via the remaining button and that keyboard/escape functionality behaves correctly via Dialog's onOpenChange.

References

• Dialog: packages/components/src/ui/dialog.tsx
• Onboarding: apps/console/src/components/OnboardingWalkthrough.tsx

Screenshot

Severity

Minor – does not block usage but affects UX polish.

---

Test after fix:

• Only one close button visible
• Dialog dismissal works as expected (button, ESC, clicking outside)
• WCAG accessibility for close button touch targets preserved

---

Related file: apps/console/src/components/OnboardingWalkthrough.tsx

---

After completing this task: run tests, update related issues, and update ROADMAP.md. If a change requires work in another ObjectStack repo, create a cross-repo issue in the target repo.