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

frontend/src/components/bounty/BountyCard.tsx

@@ -61,7 +61,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
       initial="rest"
       whileHover="hover"
       onClick={() => navigate(`/bounties/${bounty.id}`)}
-      className="relative rounded-xl border border-border bg-forge-900 p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
+      className="relative rounded-xl border border-border bg-forge-900 p-4 sm:p-5 cursor-pointer transition-colors duration-200 overflow-hidden group"
     >
       {/* Row 1: Repo + Tier */}
       <div className="flex items-center justify-between text-sm">
@@ -102,7 +102,7 @@ export function BountyCard({ bounty }: BountyCardProps) {
 
       {/* Row 4: Reward + Meta */}
       <div className="flex items-center justify-between mt-3">
-        <span className="font-mono text-lg font-semibold text-emerald">
+        <span className="font-mono text-base sm:text-lg font-semibold text-emerald">
           {formatCurrency(bounty.reward_amount, bounty.reward_token)}
         </span>
         <div className="flex items-center gap-3 text-xs text-text-muted">

frontend/src/components/bounty/BountyGrid.tsx

@@ -26,8 +26,8 @@ export function BountyGrid() {
     <section id="bounties" className="py-16 md:py-24">
       <div className="max-w-7xl mx-auto px-4">
         {/* Header row */}
-        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
-          <h2 className="font-sans text-2xl font-semibold text-text-primary">Open Bounties</h2>
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6 sm:mb-8">
+          <h2 className="font-sans text-xl sm:text-2xl font-semibold text-text-primary">Open Bounties</h2>
           <div className="flex items-center gap-2">
             <Link
               to="/bounties/create"
@@ -54,7 +54,7 @@ export function BountyGrid() {
         </div>
 
         {/* Filter pills */}
-        <div className="flex items-center gap-2 flex-wrap mb-8">
+        <div className="flex items-center gap-2 flex-wrap mb-8 overflow-x-auto scrollbar-none -mx-4 px-4 sm:mx-0 sm:px-0">
           {FILTER_SKILLS.map((skill) => (
             <button
               key={skill}

frontend/src/components/home/HeroSection.tsx

@@ -98,7 +98,7 @@ export function HeroSection() {
         variants={fadeIn}
         initial="initial"
         animate="animate"
-        className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50"
+        className="w-full max-w-xl rounded-xl border border-border bg-forge-900/90 backdrop-blur-sm overflow-hidden shadow-2xl shadow-black/50 mx-2 sm:mx-0"
       >
         {/* Title bar */}
         <div className="flex items-center gap-2 px-4 py-2.5 bg-forge-800 border-b border-border">
@@ -111,7 +111,7 @@ export function HeroSection() {
         </div>
 
         {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
+        <div className="p-3 sm:p-5 font-mono text-xs sm:text-sm leading-relaxed">
           <div className="overflow-hidden">
             <span className="text-emerald">$ </span>
             <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
@@ -154,7 +154,7 @@ export function HeroSection() {
         initial={{ opacity: 0, y: 16 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.3, duration: 0.5 }}
-        className="font-display text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10"
+        className="font-display text-2xl sm:text-3xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-10 px-2"
       >
         THE AI-POWERED BOUNTY{' '}
         <span className="text-emerald">FORGE</span>
@@ -164,7 +164,7 @@ export function HeroSection() {
         initial={{ opacity: 0, y: 12 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.45, duration: 0.5 }}
-        className="font-sans text-lg text-text-secondary text-center mt-4 max-w-lg"
+        className="font-sans text-base sm:text-lg text-text-secondary text-center mt-4 max-w-lg px-4"
       >
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
@@ -211,7 +211,7 @@ export function HeroSection() {
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 0.8, duration: 0.5 }}
-        className="flex items-center justify-center gap-6 mt-8 font-mono text-sm text-text-muted"
+        className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 mt-8 font-mono text-xs sm:text-sm text-text-muted px-2"
       >
         <span>
           <span className="text-text-primary font-semibold">

frontend/src/components/layout/Footer.tsx

@@ -31,8 +31,8 @@ export function Footer() {
       {/* Magenta accent line */}
       <div className="absolute top-0 left-0 right-0 h-px bg-gradient-footer opacity-50" />
 
-      <div className="max-w-7xl mx-auto px-4 py-12">
-        <div className="grid grid-cols-1 md:grid-cols-4 gap-10">
+      <div className="max-w-7xl mx-auto px-4 py-8 sm:py-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 sm:gap-10">
           {/* Col 1: Brand */}
           <div>
             <div className="flex items-center gap-2 mb-3">

frontend/src/components/leaderboard/LeaderboardTable.tsx

@@ -36,10 +36,10 @@ export function LeaderboardTable({ entries }: LeaderboardTableProps) {
       variants={fadeIn}
       initial="initial"
       animate="animate"
-      className="max-w-4xl mx-auto mt-6 rounded-xl border border-border bg-forge-900 overflow-hidden"
+      className="max-w-4xl mx-auto mt-6 overflow-x-auto scrollbar-none"
     >
       {/* Header */}
-      <div className="flex items-center px-4 py-3 border-b border-border/50 text-xs font-semibold text-text-muted uppercase tracking-wider">
+      <div className="min-w-[500px]"><div className="flex items-center px-4 py-3 border-b border-border/50 text-xs font-semibold text-text-muted uppercase tracking-wider">
         <div className="w-[60px] text-center">Rank</div>
         <div className="flex-1">User</div>
         <div className="w-[100px] text-center">Bounties</div>

frontend/src/components/leaderboard/PodiumCards.tsx

@@ -26,13 +26,13 @@ function PodiumCard({ entry, rank }: { entry: LeaderboardEntry; rank: number })
     : 'text-orange-500';
 
   const avatarBorderClass = isGold ? 'border-yellow-500/50' : 'border-zinc-600';
-  const avatarSize = isGold ? 'w-14 h-14' : 'w-12 h-12';
+  const avatarSize = isGold ? 'w-10 h-10 sm:w-14 sm:h-14' : 'w-9 h-9 sm:w-12 sm:h-12';
   const padding = isGold ? 'py-8 px-6' : 'py-6 px-6';
 
   return (
     <motion.div
       variants={staggerItem}
-      className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[140px]`}
+      className={`relative flex flex-col items-center rounded-xl border bg-forge-900 ${borderClass} ${padding} min-w-[100px] sm:min-w-[140px]`}
     >
       {/* Crown for #1 */}
       {isGold && (
@@ -84,7 +84,7 @@ export function PodiumCards({ entries }: PodiumCardsProps) {
       variants={staggerContainer}
       initial="initial"
       animate="animate"
-      className="flex items-end justify-center gap-4 md:gap-6 mb-12"
+      className="flex items-end justify-center gap-2 sm:gap-4 md:gap-6 mb-12 px-2 sm:px-0"
     >
       {ordered.map((entry, i) => (
         <PodiumCard key={entry.username} entry={entry} rank={ranks[i]} />

frontend/src/index.css

@@ -115,6 +115,7 @@
 html {
   scroll-behavior: smooth;
   font-size: 16px;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
@@ -125,6 +126,15 @@ body {
   color: #F0F0F5;
 }
 
+/* Hide scrollbar for mobile filter pills */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
 /* Custom scrollbar */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: #050505; }

index.html

@@ -17,6 +17,12 @@
             line-height: 1.6;
             color: #333;
             overflow-x: hidden;
+            -webkit-overflow-scrolling: touch;
+        }
+
+        img {
+            max-width: 100%;
+            height: auto;
         }
 
         .container {
@@ -319,19 +325,27 @@
 
         @media (max-width: 768px) {
             .nav-links {
+                display: none;
                 position: fixed;
-                top: 100%;
+                top: 0;
                 left: 0;
                 width: 100%;
-                background: white;
+                height: 100vh;
+                background: rgba(255, 255, 255, 0.98);
                 flex-direction: column;
-                padding: 2rem;
-                transform: translateX(-100%);
-                transition: transform 0.3s ease;
+                justify-content: center;
+                align-items: center;
+                padding: 5rem 2rem;
+                gap: 2rem;
+                z-index: 999;
             }
 
             .nav-links.active {
-                transform: translateX(0);
+                display: flex;
+            }
+
+            .nav-links a {
+                font-size: 1.3rem;
             }
 
             .mobile-menu {
@@ -340,6 +354,8 @@
                 border: none;
                 font-size: 1.5rem;
                 cursor: pointer;
+                z-index: 1000;
+                position: relative;
             }
 
             .hero-buttons {
@@ -352,6 +368,45 @@
             }
         }
 
+        @media (max-width: 375px) {
+            .hero h1 {
+                font-size: 1.8rem;
+                line-height: 1.2;
+            }
+
+            .hero p {
+                font-size: 1rem;
+            }
+
+            .stat-number {
+                font-size: 2rem;
+            }
+
+            .section-title {
+                font-size: 1.6rem;
+            }
+
+            .token-feature[style*="span 2"] {
+                grid-column: span 1 !important;
+            }
+
+            .cta-content h2 {
+                font-size: 1.5rem;
+            }
+
+            .cta-content p {
+                font-size: 1rem;
+            }
+
+            .step {
+                padding: 1.5rem;
+            }
+
+            .token-feature {
+                padding: 1.5rem;
+            }
+        }
+
         /* Animations */
         .fade-in {
             opacity: 0;
@@ -565,9 +620,27 @@ <h2>Ready to Ship Code and Earn?</h2>
         // Mobile menu toggle
         function toggleMenu() {
             const navLinks = document.querySelector('.nav-links');
+            const menuIcon = document.getElementById('menu-icon');
             navLinks.classList.toggle('active');
+            if (menuIcon) {
+                menuIcon.classList.toggle('fa-bars');
+                menuIcon.classList.toggle('fa-times');
+            }
         }
 
+        // Close mobile menu when clicking a link
+        document.querySelectorAll('.nav-links a').forEach(link => {
+            link.addEventListener('click', () => {
+                const navLinks = document.querySelector('.nav-links');
+                const menuIcon = document.getElementById('menu-icon');
+                navLinks.classList.remove('active');
+                if (menuIcon) {
+                    menuIcon.classList.add('fa-bars');
+                    menuIcon.classList.remove('fa-times');
+                }
+            });
+        });
+
         // Smooth scrolling
         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {