fix(ExampleNav) : prevent focus ring clipping in ScrollArea navigation

[Hamed-Ajaj]

Description

Fixes the incomplete focus ring issue when navigating with the Tab key through ScrollArea components.

Closes #9003

Problem

When using keyboard navigation (Tab key) through links inside a ScrollArea component, the focus rings were being clipped and incomplete.

Solution

Instead of modifying the ScrollArea component itself, the fix adds padding to the content container within the ScrollArea. This gives the focus rings adequate space to render without being clipped by the viewport's overflow.

Changes

• ExamplesNav component: Added p-2 padding to the inner flex container wrapping the navigation links
• ExampleLink component: Added comprehensive focus-visible styles including:
  • focus-visible:ring-[3px] for 3px focus ring
  • focus-visible:ring-ring/50 for ring color with opacity
  • focus-visible:border-ring for border color
  • rounded-md for rounded corners
  • Proper aria-invalid states for accessibility
• Responsive adjustment: Changed lg:max-w-none to lg:w-full for better width handling

Testing

• [x] Tested keyboard navigation (Tab/Shift+Tab) through all navigation links
• [x] Verified focus ring is fully visible and not clipped
• [x] Checked responsive behavior on mobile, tablet, and desktop
• [x] Verified scrolling still works correctly

Screenshots

Before:

After:

[vercel[bot]]

@Hamed-Ajaj is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.