docs/button/page.mdx : Code Rendering Issue in Button Documentation Page

[SrigadaAkshayKumar]

Overlapping and Clipped Code Snippets in Button Documentation (docs/button/page.mdx)

URL: https://empireui.com/docs/button
Component Affected: Button Documentation Page (src/app/(home)/docs/button/page.mdx)

---

Screenshots

1. Code Clipping and Overlap
   The code line under the Accessibility section (cva(...)) overlaps with the bullet point list, causing visual glitches and readability issues.

   

2. Disjointed Variant Display
   In the variants section for primary, destructive, outline, and secondary, values appear broken up with large vertical gaps and a lack of clarity.

   

---

Steps to Reproduce

1. Visit https://empireui.com/docs/button
2. Scroll to the "Accessibility" and buttonVariants code section(bottom of the page).
3. Notice overlapping text and improperly spaced code blocks.

---

Expected Behavior

• Code snippets should be:
  • Clearly formatted and legible.
  • Properly separated from adjacent content.
  • Free from visual clipping, overlap, and erratic spacing.

---

Environment

• Browser: Chrome (latest version-136.0.7103.114 ), Microsoft Edge(version-136.0.3240.92 )
• Device: Laptop/Desktop
• OS: Windows 11

[iamkrishnagupta10]

Yes this issue is being addressed ! Thank you