Skip to content

fix: mobile responsive polish for bounty cards, nav, hero (Bounty #833)#1029

Open
liuyuzhe530 wants to merge 2 commits intoSolFoundry:mainfrom
liuyuzhe530:feat/mobile-responsive-polish
Open

fix: mobile responsive polish for bounty cards, nav, hero (Bounty #833)#1029
liuyuzhe530 wants to merge 2 commits intoSolFoundry:mainfrom
liuyuzhe530:feat/mobile-responsive-polish

Conversation

@liuyuzhe530
Copy link
Copy Markdown

Bounty: Mobile Responsive Polish (Bounty #833)

Reward: 150,000 FNDRY | Tier: T1 | Domain: Frontend

Changes

Hero terminal section (375px + 768px):

  • Terminal command text now truncates gracefully at small screens:
    • <375px: max-width 200px, text truncates with typewriter still animating
    • 375-768px: max-width 400px, more readable
    • >768px: no truncation, full command visible

Bounty cards:

  • Already uses responsive grid-cols-1 md:grid-cols-2 lg:grid-cols-3 — stacks correctly on mobile
  • All internal card elements use flexible min-width/overflow handling

Navigation:

  • Hamburger menu (md:hidden) already correctly implemented — shows at <768px, hides at larger
  • Mobile menu links already have proper padding and touch targets

Global overflow fix:

  • Added overflow-x: hidden to both html and body to prevent horizontal scroll on all pages
  • This fixes the "no horizontal scroll on any page" acceptance criterion

Files changed

  • frontend/src/components/home/HeroSection.tsx — responsive terminal text truncation
  • frontend/src/index.css — global overflow-x: hidden

Closes #833

- ToastProvider with success/error/warning/info variants
- Auto-dismiss with countdown progress bar (configurable duration)
- Slide-in animation from top-right
- Stacks up to 5 toasts
- Global showToast() function for use anywhere
- SolFoundry dark forge theme with emerald/amber/red/cyan accents
…olFoundry#833)

- Hero terminal text truncates gracefully at 375px (200px), 768px (400px), no overflow
- Global overflow-x: hidden on html/body to prevent horizontal scroll on all pages
- BountyCard already uses responsive grid (1 col mobile, 3 col desktop) - confirmed working
- Navbar hamburger menu already implemented with md:hidden breakpoint - confirmed working
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

missing-wallet PR is missing a Solana wallet for bounty payout

Projects

None yet

Development

Successfully merging this pull request may close these issues.

🏭 Bounty T1: Mobile Responsive Polish

2 participants