Fix: Improve Performance Leaderboard Dropdown Styling and Consistency (Fixes Issue #464)

[Roaring30s]

Issue

Fixes #465

Summary

This PR improves the styling and consistency of the Performance Leaderboard dropdown selectors (Region and Type) to better match the overall explorer design. The changes address styling inconsistencies, layout shifts, and typography mismatches.

Changes Made

Styling Improvements

• Typography: Added fontFamily: "$body" to both Region and Type dropdowns to ensure consistent Inter font usage across the application
• Colors & Borders: Removed white borders and updated hover states to use Livepeer green (rgba(0,235,136,.1)) instead of default blue
• Spacing: Applied consistent padding, border radius, and spacing to match the design system

Layout Fixes

• Mobile Chevron Positioning: Fixed chevron icon positioning on mobile by moving width constraints from the select element to the parent container, ensuring proper alignment
• Layout Shifts: Eliminated cumulative layout shift (CLS) by setting fixed widths:
  • Mobile: 200px
  • Desktop (@bp2+): 350px
• Responsive Design: Ensured dropdowns maintain consistent sizing across all screen sizes

Component Updates

• PerformanceListSelector:
  • Updated to use native HTML select element (matching Region dropdown approach)
  • Added responsive width constraints
  • Improved loader skeleton to match selector dimensions (200px mobile, 350px desktop)
  • Fixed chevron positioning relative to select element

Files Modified

• pages/leaderboard.tsx - Added fontFamily to Region dropdown
• components/PerformanceListSelector/index.tsx - Complete styling overhaul and responsive width implementation

Testing

• Verified dropdowns display correctly on mobile and desktop
• Confirmed typography matches rest of application
• Tested hover states and focus states
• Verified no layout shifts occur during data loading
• Checked chevron alignment on all screen sizes

Screenshots

Notes

• Both dropdowns now use consistent styling patterns
• All changes maintain backward compatibility
• No breaking changes introduced

[vercel]

@Roaring30s is attempting to deploy a commit to the Livepeer Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
explorer-arbitrum-one	Ready	Preview, Comment	Jan 14, 2026 0:15am

[ECWireless]

Looks great!