Skip to content

fix: mobile responsive polish for bounty cards, navigation, and hero section (Closes #833) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT] - #1452

Open
waterWang wants to merge 8 commits into
SolFoundry:mainfrom
waterWang:feat/mobile-responsive-polish
Open

fix: mobile responsive polish for bounty cards, navigation, and hero section (Closes #833) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT]#1452
waterWang wants to merge 8 commits into
SolFoundry:mainfrom
waterWang:feat/mobile-responsive-polish

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Mobile responsive polish for the SolFoundry landing page and React frontend.

Changes

Landing page (index.html):

  • Full-screen mobile navigation drawer (slides from top, covers entire screen)
  • Hamburger icon changes to X when menu is open
  • Mobile menu closes when clicking a nav link
  • CTA button moves into the mobile nav drawer (hidden on desktop)
  • New 375px breakpoint styles for:
    • Smaller hero heading (1.8rem)
    • Smaller stat numbers (2rem)
    • Section titles and CTA text adjusted
    • Token feature grid column span fix
  • overflow-x: hidden on body prevents horizontal scroll
  • -webkit-overflow-scrolling: touch for smooth iOS scrolling

React Frontend Components:

BountyCard:

  • Reduced padding on mobile (p-4 sm:p-5)
  • Smaller reward font size on mobile (text-base sm:text-lg)

HeroSection:

  • Responsive terminal card with horizontal margins on mobile
  • Smaller headline and subtitle on mobile
  • Smaller terminal body text on mobile
  • Live stats strip wraps on mobile with reduced gap

BountyGrid:

  • Filter pills horizontally scrollable on mobile (hidden scrollbar)
  • Reduced gap between sections on mobile
  • Smaller section title on mobile

LeaderboardTable:

  • Added horizontal scroll wrapper for mobile (overflow-x-auto)
  • Minimum width 500px to prevent table column collapse

PodiumCards:

  • Smaller card widths on mobile (min-w-[100px] sm:min-w-[140px])
  • Smaller avatar sizes on mobile
  • Reduced gap between cards on mobile

Footer:

  • Responsive 2-column grid on medium screens
  • Reduced padding on mobile

index.css:

  • Added scrollbar-none utility class
  • Added -webkit-text-size-adjust: 100% for iOS

Verification

  • All pages tested at 375px (iPhone SE) and 768px (iPad) breakpoints
  • No horizontal scroll on any page
  • Bounty cards stack properly in single column on mobile
  • Navigation hamburger menu works correctly with full-screen drawer
  • Hero terminal section is readable on small screens

Closes #833

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🏭 Bounty T1: Mobile Responsive Polish

1 participant