From ff7cff1ab140b117a6980d56686967f851ecb938 Mon Sep 17 00:00:00 2001
From: fang liu <249752809+liufang88789-ui@users.noreply.github.com>
Date: Mon, 6 Apr 2026 09:20:38 +0800
Subject: [PATCH] feat: improve mobile responsive polish

---
 .../src/__tests__/responsive-polish.test.tsx  |  73 +++++++++
 frontend/src/components/bounty/BountyCard.tsx |  53 +++---
 .../src/components/bounty/BountyCountdown.tsx |  55 +++++++
 frontend/src/components/home/HeroSection.tsx  | 154 +++++-------------
 frontend/src/components/layout/Footer.tsx     |  41 ++---
 frontend/src/components/layout/Navbar.tsx     | 133 +++++----------
 6 files changed, 243 insertions(+), 266 deletions(-)
 create mode 100644 frontend/src/__tests__/responsive-polish.test.tsx
 create mode 100644 frontend/src/components/bounty/BountyCountdown.tsx

diff --git a/frontend/src/__tests__/responsive-polish.test.tsx b/frontend/src/__tests__/responsive-polish.test.tsx
new file mode 100644
index 000000000..52c4a27e5
--- /dev/null
+++ b/frontend/src/__tests__/responsive-polish.test.tsx
@@ -0,0 +1,73 @@
+import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BountyCard } from '../components/bounty/BountyCard';
+import { Navbar } from '../components/layout/Navbar';
+import { Footer } from '../components/layout/Footer';
+import { HeroSection } from '../components/home/HeroSection';
+
+vi.mock('../hooks/useStats', () => ({
+  useStats: () => ({ data: { open_bounties: 12, total_paid_usdc: 3400, total_contributors: 7 } }),
+}));
+
+vi.mock('../hooks/useAuth', () => ({
+  useAuth: () => ({ isAuthenticated: false, user: null, logout: vi.fn() }),
+}));
+
+vi.mock('../api/auth', () => ({
+  getGitHubAuthorizeUrl: vi.fn(),
+}));
+
+const bounty = {
+  id: '1',
+  title: 'A very long bounty title that should wrap correctly on smaller mobile screens without causing horizontal overflow or layout breakage',
+  description: 'desc',
+  status: 'open' as const,
+  tier: 'T1' as const,
+  reward_amount: 150,
+  reward_token: 'FNDRY' as const,
+  org_name: 'SolFoundry',
+  repo_name: 'solfoundry',
+  issue_number: 824,
+  skills: ['TypeScript', 'React', 'JavaScript'],
+  deadline: new Date(Date.now() + 86400000).toISOString(),
+  submission_count: 3,
+  created_at: new Date().toISOString(),
+};
+
+function withProviders(ui: React.ReactElement) {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return render(
+    <MemoryRouter>
+      <QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>
+    </MemoryRouter>,
+  );
+}
+
+describe('responsive polish', () => {
+  it('renders bounty card content without losing key mobile information', () => {
+    withProviders(<BountyCard bounty={bounty} />);
+    expect(screen.getByText(/A very long bounty title/)).toBeInTheDocument();
+    expect(screen.getByText('150 FNDRY')).toBeInTheDocument();
+    expect(screen.getByText('Open')).toBeInTheDocument();
+  });
+
+  it('renders navbar mobile and sign-in controls', () => {
+    withProviders(<Navbar />);
+    expect(screen.getByText('Sign in')).toBeInTheDocument();
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(1);
+  });
+
+  it('renders hero CTAs and stats', () => {
+    withProviders(<HeroSection />);
+    expect(screen.getByText('Browse Bounties')).toBeInTheDocument();
+    expect(screen.getByText('Post a Bounty')).toBeInTheDocument();
+  });
+
+  it('renders footer token contract section without overflow-only content loss', () => {
+    withProviders(<Footer />);
+    expect(screen.getByText('$FNDRY Token')).toBeInTheDocument();
+    expect(screen.getByTitle('Copy contract address')).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..ac7e4e7c8 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/frontend/src/components/bounty/BountyCard.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
-import { GitPullRequest, Clock } from 'lucide-react';
+import { GitPullRequest } from 'lucide-react';
 import type { Bounty } from '../../types/bounty';
 import { cardHover } from '../../lib/animations';
-import { timeLeft, formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { formatCurrency, LANG_COLORS } from '../../lib/utils';
+import { BountyCountdown } from './BountyCountdown';
 
 function TierBadge({ tier }: { tier: string }) {
   const styles: Record<string, string> = {
@@ -61,69 +62,57 @@ 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 min-w-0"
     >
-      {/* Row 1: Repo + Tier */}
-      <div className="flex items-center justify-between text-sm">
-        <div className="flex items-center gap-2 min-w-0">
+      <div className="flex items-start justify-between gap-2 text-sm">
+        <div className="flex items-center gap-2 min-w-0 flex-1">
           {bounty.org_avatar_url && (
             <img src={bounty.org_avatar_url} className="w-5 h-5 rounded-full flex-shrink-0" alt="" />
           )}
-          <span className="text-text-muted font-mono text-xs truncate">
+          <span className="text-text-muted font-mono text-[11px] sm:text-xs truncate block min-w-0">
             {orgName}/{repoName}
             {issueNumber && <span className="ml-1">#{issueNumber}</span>}
           </span>
         </div>
-        <TierBadge tier={bounty.tier ?? 'T1'} />
+        <div className="flex-shrink-0">
+          <TierBadge tier={bounty.tier ?? 'T1'} />
+        </div>
       </div>
 
-      {/* Row 2: Title */}
-      <h3 className="mt-3 font-sans text-base font-semibold text-text-primary leading-snug line-clamp-2">
+      <h3 className="mt-3 font-sans text-sm sm:text-base font-semibold text-text-primary leading-snug line-clamp-3 sm:line-clamp-2 break-words">
         {bounty.title}
       </h3>
 
-      {/* Row 3: Language dots */}
       {skills.length > 0 && (
-        <div className="flex items-center gap-3 mt-3">
+        <div className="flex items-center gap-x-3 gap-y-2 flex-wrap mt-3 min-w-0">
           {skills.map((lang) => (
-            <span key={lang} className="inline-flex items-center gap-1.5 text-xs text-text-muted">
-              <span
-                className="w-2.5 h-2.5 rounded-full"
-                style={{ backgroundColor: LANG_COLORS[lang] ?? '#888' }}
-              />
-              {lang}
+            <span key={lang} className="inline-flex items-center gap-1.5 text-xs text-text-muted max-w-full">
+              <span className="w-2.5 h-2.5 rounded-full flex-shrink-0" style={{ backgroundColor: LANG_COLORS[lang] ?? '#888' }} />
+              <span className="truncate">{lang}</span>
             </span>
           ))}
         </div>
       )}
 
-      {/* Separator */}
       <div className="mt-4 border-t border-border/50" />
 
-      {/* Row 4: Reward + Meta */}
-      <div className="flex items-center justify-between mt-3">
-        <span className="font-mono text-lg font-semibold text-emerald">
+      <div className="mt-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <span className="font-mono text-base sm:text-lg font-semibold text-emerald truncate">
           {formatCurrency(bounty.reward_amount, bounty.reward_token)}
         </span>
-        <div className="flex items-center gap-3 text-xs text-text-muted">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-text-muted sm:justify-end">
           <span className="inline-flex items-center gap-1">
             <GitPullRequest className="w-3.5 h-3.5" />
             {bounty.submission_count} PRs
           </span>
-          {bounty.deadline && (
-            <span className="inline-flex items-center gap-1">
-              <Clock className="w-3.5 h-3.5" />
-              {timeLeft(bounty.deadline)}
-            </span>
-          )}
+          {bounty.deadline && <BountyCountdown deadline={bounty.deadline} compact />}
         </div>
       </div>
 
-      {/* Status badge */}
-      <span className={`absolute bottom-4 right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
+      <div className={`mt-3 sm:mt-4 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
         <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
         {statusLabel}
-      </span>
+      </div>
     </motion.div>
   );
 }
diff --git a/frontend/src/components/bounty/BountyCountdown.tsx b/frontend/src/components/bounty/BountyCountdown.tsx
new file mode 100644
index 000000000..cb9f83348
--- /dev/null
+++ b/frontend/src/components/bounty/BountyCountdown.tsx
@@ -0,0 +1,55 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Clock } from 'lucide-react';
+
+interface CountdownState {
+  expired: boolean;
+  totalMs: number;
+  days: number;
+  hours: number;
+  minutes: number;
+}
+
+function getCountdownState(deadline: string): CountdownState {
+  const totalMs = new Date(deadline).getTime() - Date.now();
+
+  if (Number.isNaN(totalMs) || totalMs <= 0) {
+    return { expired: true, totalMs: 0, days: 0, hours: 0, minutes: 0 };
+  }
+
+  const totalMinutes = Math.floor(totalMs / 60000);
+  const days = Math.floor(totalMinutes / (60 * 24));
+  const hours = Math.floor((totalMinutes % (60 * 24)) / 60);
+  const minutes = totalMinutes % 60;
+
+  return { expired: false, totalMs, days, hours, minutes };
+}
+
+function getToneClass(state: CountdownState) {
+  if (state.expired) return 'text-status-error';
+  if (state.totalMs < 60 * 60 * 1000) return 'text-status-error';
+  if (state.totalMs < 24 * 60 * 60 * 1000) return 'text-status-warning';
+  return 'text-text-muted';
+}
+
+export function BountyCountdown({ deadline, compact = false }: { deadline: string; compact?: boolean }) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    const timer = window.setInterval(() => setNow(Date.now()), 30000);
+    return () => window.clearInterval(timer);
+  }, []);
+
+  const state = useMemo(() => {
+    void now;
+    return getCountdownState(deadline);
+  }, [deadline, now]);
+
+  const label = state.expired ? 'Expired' : `${state.days}d ${state.hours}h ${state.minutes}m`;
+
+  return (
+    <span className={`inline-flex items-center gap-1 ${getToneClass(state)}`} aria-label={`Time remaining: ${label}`}>
+      <Clock className={compact ? 'w-3.5 h-3.5' : 'w-4 h-4'} />
+      <span className="font-mono">{label}</span>
+    </span>
+  );
+}
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e37307166..0c21b293c 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { motion, useInView, animate, useMotionValue } from 'framer-motion';
 import { useStats } from '../../hooks/useStats';
 import { getGitHubAuthorizeUrl } from '../../api/auth';
@@ -24,18 +24,7 @@ function EmberParticles({ count = 5 }: { count?: number }) {
   return (
     <>
       {particles.map((p) => (
-        <div
-          key={p.id}
-          className="absolute pointer-events-none rounded-full animate-ember opacity-60"
-          style={{
-            left: p.left,
-            bottom: '30%',
-            width: p.size,
-            height: p.size,
-            backgroundColor: p.color,
-            animationDelay: p.delay,
-          }}
-        />
+        <div key={p.id} className="absolute pointer-events-none rounded-full animate-ember opacity-60" style={{ left: p.left, bottom: '30%', width: p.size, height: p.size, backgroundColor: p.color, animationDelay: p.delay }} />
       ))}
     </>
   );
@@ -48,16 +37,14 @@ function CountUp({ target, prefix = '', suffix = '' }: { target: number; prefix?
 
   useEffect(() => {
     if (!inView) return;
-    const controls = animate(motionValue, target, {
-      duration: 1.5,
-      ease: 'easeOut',
-    });
+    const controls = animate(motionValue, target, { duration: 1.5, ease: 'easeOut' });
     const unsubscribe = motionValue.on('change', (v) => {
-      if (ref.current) {
-        ref.current.textContent = `${prefix}${Math.round(v).toLocaleString()}${suffix}`;
-      }
+      if (ref.current) ref.current.textContent = `${prefix}${Math.round(v).toLocaleString()}${suffix}`;
     });
-    return () => { controls.stop(); unsubscribe(); };
+    return () => {
+      controls.stop();
+      unsubscribe();
+    };
   }, [inView, target, motionValue, prefix, suffix]);
 
   return <span ref={ref}>{prefix}0{suffix}</span>;
@@ -66,15 +53,16 @@ function CountUp({ target, prefix = '', suffix = '' }: { target: number; prefix?
 export function HeroSection() {
   const { data: stats } = useStats();
   const { isAuthenticated } = useAuth();
-  const navigate = useNavigate();
   const [typewriterDone, setTypewriterDone] = useState(false);
   const [resultLinesVisible, setResultLinesVisible] = useState(false);
 
   useEffect(() => {
-    // Typewriter takes ~3s (0.5s delay + 2.5s), then show result lines
     const t1 = setTimeout(() => setTypewriterDone(true), 3100);
     const t2 = setTimeout(() => setResultLinesVisible(true), 3400);
-    return () => { clearTimeout(t1); clearTimeout(t2); };
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+    };
   }, []);
 
   const handleSignIn = async () => {
@@ -87,60 +75,38 @@ export function HeroSection() {
   };
 
   return (
-    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 pt-24 pb-16 overflow-hidden">
-      {/* Background layers */}
+    <section className="relative min-h-[90vh] flex flex-col items-center justify-center px-4 pt-24 pb-16 overflow-x-clip">
       <div className="absolute inset-0 bg-grid-forge bg-grid-forge pointer-events-none" style={{ backgroundSize: '40px 40px' }} />
       <div className="absolute inset-0 bg-gradient-hero pointer-events-none" />
       <EmberParticles count={5} />
 
-      {/* Terminal card */}
-      <motion.div
-        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"
-      >
-        {/* Title bar */}
-        <div className="flex items-center gap-2 px-4 py-2.5 bg-forge-800 border-b border-border">
-          <div className="flex gap-1.5">
+      <motion.div 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">
+        <div className="flex items-center gap-2 px-3 sm:px-4 py-2.5 bg-forge-800 border-b border-border min-w-0">
+          <div className="flex gap-1.5 flex-shrink-0">
             <span className="w-3 h-3 rounded-full bg-status-error/80" />
             <span className="w-3 h-3 rounded-full bg-status-warning/80" />
             <span className="w-3 h-3 rounded-full bg-status-success/80" />
           </div>
-          <span className="font-mono text-xs text-text-muted ml-2">solfoundry — terminal</span>
+          <span className="font-mono text-[11px] sm:text-xs text-text-muted ml-2 truncate">solfoundry — terminal</span>
         </div>
 
-        {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
-          <div className="overflow-hidden">
+        <div className="p-4 sm:p-5 font-mono text-xs sm:text-sm leading-relaxed overflow-hidden">
+          <div className="overflow-hidden max-w-full">
             <span className="text-emerald">$ </span>
-            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
+            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter max-w-full align-bottom">
               forge bounty --reward 100 --lang typescript --tier 2
             </span>
-            {typewriterDone && (
-              <span className="inline-block w-2 h-5 bg-emerald animate-blink ml-0.5 align-middle" />
-            )}
+            {typewriterDone && <span className="inline-block w-2 h-5 bg-emerald animate-blink ml-0.5 align-middle" />}
           </div>
 
           {resultLinesVisible && (
-            <motion.div
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ duration: 0.3 }}
-              className="mt-3 space-y-1.5"
-            >
+            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.3 }} className="mt-3 space-y-1.5 text-xs sm:text-sm break-words">
               {[
                 { text: '✓ Bounty created: #142', delay: 0 },
                 { text: '✓ Escrow funded: 100 USDC', delay: 0.3 },
                 { text: '✓ 3 contributors notified', delay: 0.6 },
               ].map((line, i) => (
-                <motion.div
-                  key={i}
-                  initial={{ opacity: 0, x: -8 }}
-                  animate={{ opacity: 1, x: 0 }}
-                  transition={{ delay: line.delay, duration: 0.3 }}
-                  className="text-emerald"
-                >
+                <motion.div key={i} initial={{ opacity: 0, x: -8 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: line.delay, duration: 0.3 }} className="text-emerald break-words">
                   {line.text}
                 </motion.div>
               ))}
@@ -149,89 +115,47 @@ export function HeroSection() {
         </div>
       </motion.div>
 
-      {/* Headline */}
-      <motion.h1
-        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"
-      >
-        THE AI-POWERED BOUNTY{' '}
-        <span className="text-emerald">FORGE</span>
+      <motion.h1 initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3, duration: 0.5 }} className="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-text-primary tracking-wide text-center mt-8 sm:mt-10 px-2 leading-tight">
+        THE AI-POWERED BOUNTY <span className="text-emerald">FORGE</span>
       </motion.h1>
 
-      <motion.p
-        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"
-      >
+      <motion.p initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.45, duration: 0.5 }} className="font-sans text-base sm:text-lg text-text-secondary text-center mt-4 max-w-lg px-3">
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
 
-      {/* CTAs */}
-      <motion.div
-        initial={{ opacity: 0, y: 12 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.6, duration: 0.5 }}
-        className="flex flex-wrap items-center justify-center gap-4 mt-8"
-      >
-        <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-          <Link
-            to="/bounties"
-            className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-block"
-          >
+      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.6, duration: 0.5 }} className="flex flex-col sm:flex-row flex-wrap items-stretch sm:items-center justify-center gap-3 sm:gap-4 mt-8 w-full max-w-md sm:max-w-none">
+        <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap" className="w-full sm:w-auto">
+          <Link to="/bounties" className="px-6 py-3 rounded-lg bg-emerald text-text-inverse font-semibold text-sm hover:bg-emerald-light transition-colors duration-200 shadow-lg shadow-emerald/20 inline-flex justify-center w-full sm:w-auto">
             Browse Bounties
           </Link>
         </motion.div>
 
-        <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-          <Link
-            to="/bounties/create"
-            className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-block"
-          >
+        <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap" className="w-full sm:w-auto">
+          <Link to="/bounties/create" className="px-6 py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-flex justify-center w-full sm:w-auto">
             Post a Bounty
           </Link>
         </motion.div>
 
         {!isAuthenticated && (
-          <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap">
-            <button
-              onClick={handleSignIn}
-              className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center gap-2"
-            >
+          <motion.div variants={buttonHover} initial="rest" whileHover="hover" whileTap="tap" className="w-full sm:w-auto">
+            <button onClick={handleSignIn} className="px-6 py-3 rounded-lg border border-border text-text-secondary font-medium text-sm hover:border-border-hover hover:text-text-primary transition-all duration-200 inline-flex items-center justify-center gap-2 w-full sm:w-auto">
               <GitHubIcon /> GitHub
             </button>
           </motion.div>
         )}
       </motion.div>
 
-      {/* Live stats strip */}
-      <motion.div
-        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"
-      >
+      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.8, duration: 0.5 }} className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 mt-8 font-mono text-xs sm:text-sm text-text-muted px-3 text-center">
         <span>
-          <span className="text-text-primary font-semibold">
-            <CountUp target={stats?.open_bounties ?? 142} />
-          </span>
-          {' '}open bounties
+          <span className="text-text-primary font-semibold"><CountUp target={stats?.open_bounties ?? 142} /></span> open bounties
         </span>
-        <span className="text-text-muted">·</span>
+        <span className="hidden sm:inline text-text-muted">·</span>
         <span>
-          <span className="text-text-primary font-semibold">
-            $<CountUp target={stats?.total_paid_usdc ?? 24500} />
-          </span>
-          {' '}paid
+          <span className="text-text-primary font-semibold">$<CountUp target={stats?.total_paid_usdc ?? 24500} /></span> paid
         </span>
-        <span className="text-text-muted">·</span>
+        <span className="hidden sm:inline text-text-muted">·</span>
         <span>
-          <span className="text-text-primary font-semibold">
-            <CountUp target={stats?.total_contributors ?? 89} />
-          </span>
-          {' '}builders
+          <span className="text-text-primary font-semibold"><CountUp target={stats?.total_contributors ?? 89} /></span> builders
         </span>
       </motion.div>
     </section>
diff --git a/frontend/src/components/layout/Footer.tsx b/frontend/src/components/layout/Footer.tsx
index f599de4d8..50c3f7a46 100644
--- a/frontend/src/components/layout/Footer.tsx
+++ b/frontend/src/components/layout/Footer.tsx
@@ -27,16 +27,14 @@ export function Footer() {
   };
 
   return (
-    <footer className="relative mt-24 border-t border-border bg-forge-950">
-      {/* Magenta accent line */}
+    <footer className="relative mt-24 border-t border-border bg-forge-950 overflow-x-hidden">
       <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">
-          {/* Col 1: Brand */}
-          <div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10">
+          <div className="min-w-0">
             <div className="flex items-center gap-2 mb-3">
-              <img src="/logo-icon.png" alt="SolFoundry" className="w-6 h-6" />
+              <img src="/logo-icon.png" alt="SolFoundry" className="w-6 h-6 flex-shrink-0" />
               <span className="font-display text-lg font-semibold text-text-primary">SolFoundry</span>
             </div>
             <p className="text-sm text-text-secondary max-w-xs leading-relaxed">
@@ -44,7 +42,6 @@ export function Footer() {
             </p>
           </div>
 
-          {/* Col 2: Platform */}
           <div>
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">Platform</h4>
             <ul className="space-y-2">
@@ -63,42 +60,26 @@ export function Footer() {
             </ul>
           </div>
 
-          {/* Col 3: Social */}
           <div>
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">Social</h4>
             <div className="flex flex-col gap-3">
-              <a
-                href="https://x.com/foundrysol"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors duration-150"
-              >
+              <a href="https://x.com/foundrysol" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors duration-150">
                 <XIcon />
-                <span className="text-sm">@foundrysol</span>
+                <span className="text-sm break-all">@foundrysol</span>
               </a>
-              <a
-                href="https://github.com/SolFoundry"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors duration-150"
-              >
+              <a href="https://github.com/SolFoundry" target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 text-text-muted hover:text-text-primary transition-colors duration-150">
                 <GitHubIcon />
                 <span className="text-sm">GitHub</span>
               </a>
             </div>
           </div>
 
-          {/* Col 4: Token */}
-          <div>
+          <div className="min-w-0">
             <h4 className="font-sans text-sm font-semibold text-text-primary mb-4">$FNDRY Token</h4>
             <p className="text-sm text-text-muted mb-3">Contract Address:</p>
-            <div className="font-mono text-xs text-text-muted bg-forge-800 rounded px-3 py-2 inline-flex items-center gap-2 w-full">
-              <span className="truncate">{FNDRY_CA.slice(0, 8)}...{FNDRY_CA.slice(-4)}</span>
-              <button
-                onClick={copyCA}
-                className="flex-shrink-0 text-text-muted hover:text-text-primary transition-colors duration-150"
-                title="Copy contract address"
-              >
+            <div className="font-mono text-xs text-text-muted bg-forge-800 rounded px-3 py-2 inline-flex items-center gap-2 w-full min-w-0">
+              <span className="truncate min-w-0">{FNDRY_CA.slice(0, 8)}...{FNDRY_CA.slice(-4)}</span>
+              <button onClick={copyCA} className="flex-shrink-0 text-text-muted hover:text-text-primary transition-colors duration-150" title="Copy contract address">
                 {copied ? <Check className="w-3.5 h-3.5 text-emerald" /> : <Copy className="w-3.5 h-3.5" />}
               </button>
             </div>
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index e4ec31b03..db81bcff5 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -38,7 +38,6 @@ export function Navbar() {
       const url = await getGitHubAuthorizeUrl();
       window.location.href = url;
     } catch {
-      // Fallback: direct to backend authorize endpoint
       window.location.href = '/api/auth/github/authorize';
     }
   };
@@ -50,104 +49,63 @@ export function Navbar() {
 
   return (
     <nav
-      className={`fixed top-0 left-0 right-0 z-50 h-16 transition-all duration-200 ${
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-200 ${
         scrolled ? 'bg-forge-950/90' : 'bg-forge-950/80'
       } backdrop-blur-xl border-b border-border`}
     >
-      {/* Gradient bottom border */}
-      <div
-        className={`absolute bottom-0 left-0 right-0 h-px bg-gradient-navbar transition-opacity duration-200 ${
-          scrolled ? 'opacity-70' : 'opacity-40'
-        }`}
-      />
+      <div className={`absolute bottom-0 left-0 right-0 h-px bg-gradient-navbar transition-opacity duration-200 ${scrolled ? 'opacity-70' : 'opacity-40'}`} />
 
-      <div className="max-w-7xl mx-auto h-full px-4 flex items-center justify-between">
-        {/* Left: Logo + Nav */}
-        <div className="flex items-center gap-8">
-          <Link to="/" className="flex items-center gap-2.5 group">
-            <img
-              src="/logo-icon.png"
-              alt="SolFoundry"
-              className="w-7 h-7 group-hover:drop-shadow-[0_0_8px_rgba(0,230,118,0.4)] transition-all duration-200"
-            />
-            <span className="font-display text-lg font-semibold text-text-primary tracking-wide">
-              SolFoundry
-            </span>
+      <div className="max-w-7xl mx-auto min-h-16 px-4 py-3 flex items-center justify-between gap-3">
+        <div className="flex items-center gap-4 min-w-0">
+          <Link to="/" className="flex items-center gap-2.5 group min-w-0">
+            <img src="/logo-icon.png" alt="SolFoundry" className="w-7 h-7 group-hover:drop-shadow-[0_0_8px_rgba(0,230,118,0.4)] transition-all duration-200 flex-shrink-0" />
+            <span className="font-display text-base sm:text-lg font-semibold text-text-primary tracking-wide truncate">SolFoundry</span>
           </Link>
 
-          {/* Desktop nav links */}
-          <div className="hidden md:flex items-center gap-8">
+          <div className="hidden md:flex items-center gap-6 lg:gap-8 min-w-0">
             {NAV_LINKS.map((link) => (
               <Link
                 key={link.to}
                 to={link.to}
-                className={`relative font-sans text-sm font-medium transition-colors duration-200 ${
-                  isActive(link.to)
-                    ? 'text-text-primary'
-                    : 'text-text-secondary hover:text-text-primary'
-                }`}
+                className={`relative font-sans text-sm font-medium transition-colors duration-200 ${isActive(link.to) ? 'text-text-primary' : 'text-text-secondary hover:text-text-primary'}`}
               >
                 {link.label}
-                {isActive(link.to) && (
-                  <motion.div
-                    layoutId="nav-indicator"
-                    className="absolute -bottom-[21px] left-0 right-0 h-0.5 bg-emerald"
-                  />
-                )}
+                {isActive(link.to) && <motion.div layoutId="nav-indicator" className="absolute -bottom-[21px] left-0 right-0 h-0.5 bg-emerald" />}
               </Link>
             ))}
           </div>
         </div>
 
-        {/* Right: Live count + Auth */}
-        <div className="flex items-center gap-3">
-          {/* Live bounty count */}
+        <div className="flex items-center gap-2 sm:gap-3 flex-shrink-0">
           {stats && (
-            <div className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-bg border border-emerald-border">
-              <span className="w-2 h-2 rounded-full bg-emerald animate-pulse-glow" />
-              <span className="font-mono text-xs text-emerald">{stats.open_bounties} open</span>
+            <div className="hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-bg border border-emerald-border max-w-[120px] lg:max-w-none">
+              <span className="w-2 h-2 rounded-full bg-emerald animate-pulse-glow flex-shrink-0" />
+              <span className="font-mono text-xs text-emerald truncate">{stats.open_bounties} open</span>
             </div>
           )}
 
-          {/* Auth */}
           {isAuthenticated && user ? (
-            <div className="relative">
-              <button
-                onClick={() => setDropdownOpen(!dropdownOpen)}
-                className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-forge-800 transition-colors duration-200"
-              >
+            <div className="relative hidden sm:block">
+              <button onClick={() => setDropdownOpen(!dropdownOpen)} className="flex items-center gap-2 px-2 py-1 rounded-lg hover:bg-forge-800 transition-colors duration-200 max-w-[180px]">
                 {user.avatar_url ? (
-                  <img src={user.avatar_url} alt={user.username} className="w-7 h-7 rounded-full border border-border" />
+                  <img src={user.avatar_url} alt={user.username} className="w-7 h-7 rounded-full border border-border flex-shrink-0" />
                 ) : (
-                  <div className="w-7 h-7 rounded-full bg-forge-700 flex items-center justify-center">
+                  <div className="w-7 h-7 rounded-full bg-forge-700 flex items-center justify-center flex-shrink-0">
                     <User className="w-4 h-4 text-text-muted" />
                   </div>
                 )}
-                <span className="hidden sm:block text-sm font-medium text-text-primary">{user.username}</span>
-                <ChevronDown className="w-3.5 h-3.5 text-text-muted" />
+                <span className="text-sm font-medium text-text-primary truncate">{user.username}</span>
+                <ChevronDown className="w-3.5 h-3.5 text-text-muted flex-shrink-0" />
               </button>
 
               <AnimatePresence>
                 {dropdownOpen && (
-                  <motion.div
-                    initial={{ opacity: 0, y: -8 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    exit={{ opacity: 0, y: -8 }}
-                    transition={{ duration: 0.15 }}
-                    className="absolute right-0 top-full mt-2 w-48 rounded-xl border border-border bg-forge-900 shadow-2xl shadow-black/50 overflow-hidden"
-                  >
-                    <Link
-                      to="/profile"
-                      onClick={() => setDropdownOpen(false)}
-                      className="flex items-center gap-2.5 px-4 py-3 text-sm text-text-secondary hover:text-text-primary hover:bg-forge-850 transition-colors duration-150"
-                    >
+                  <motion.div initial={{ opacity: 0, y: -8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -8 }} transition={{ duration: 0.15 }} className="absolute right-0 top-full mt-2 w-48 rounded-xl border border-border bg-forge-900 shadow-2xl shadow-black/50 overflow-hidden">
+                    <Link to="/profile" onClick={() => setDropdownOpen(false)} className="flex items-center gap-2.5 px-4 py-3 text-sm text-text-secondary hover:text-text-primary hover:bg-forge-850 transition-colors duration-150">
                       <User className="w-4 h-4" /> Profile
                     </Link>
                     <div className="border-t border-border/50" />
-                    <button
-                      onClick={() => { logout(); setDropdownOpen(false); navigate('/'); }}
-                      className="w-full flex items-center gap-2.5 px-4 py-3 text-sm text-text-secondary hover:text-status-error hover:bg-forge-850 transition-colors duration-150"
-                    >
+                    <button onClick={() => { logout(); setDropdownOpen(false); navigate('/'); }} className="w-full flex items-center gap-2.5 px-4 py-3 text-sm text-text-secondary hover:text-status-error hover:bg-forge-850 transition-colors duration-150">
                       <LogOut className="w-4 h-4" /> Sign out
                     </button>
                   </motion.div>
@@ -155,46 +113,43 @@ export function Navbar() {
               </AnimatePresence>
             </div>
           ) : (
-            <button
-              onClick={handleGitHubSignIn}
-              className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-sm font-medium transition-all duration-200 hover:bg-forge-700"
-            >
+            <button onClick={handleGitHubSignIn} className="hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-sm font-medium transition-all duration-200 hover:bg-forge-700">
               <GitHubIcon />
-              <span className="hidden sm:block">Sign in with GitHub</span>
-              <span className="sm:hidden">Sign in</span>
+              <span className="hidden lg:block">Sign in with GitHub</span>
+              <span className="lg:hidden">Sign in</span>
             </button>
           )}
 
-          {/* Mobile hamburger */}
-          <button
-            onClick={() => setMenuOpen(!menuOpen)}
-            className="md:hidden p-2 rounded-lg hover:bg-forge-800 transition-colors text-text-secondary"
-          >
+          <button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden p-2 rounded-lg hover:bg-forge-800 transition-colors text-text-secondary">
             {menuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
           </button>
         </div>
       </div>
 
-      {/* Mobile menu */}
       <AnimatePresence>
         {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            className="md:hidden overflow-hidden bg-forge-900 border-b border-border"
-          >
+          <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: 'auto' }} exit={{ opacity: 0, height: 0 }} className="md:hidden overflow-hidden bg-forge-900 border-b border-border">
             <div className="px-4 py-4 flex flex-col gap-1">
               {NAV_LINKS.map((link) => (
-                <Link
-                  key={link.to}
-                  to={link.to}
-                  onClick={() => setMenuOpen(false)}
-                  className="px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-forge-850 transition-colors duration-150"
-                >
+                <Link key={link.to} to={link.to} onClick={() => setMenuOpen(false)} className="px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-forge-850 transition-colors duration-150">
                   {link.label}
                 </Link>
               ))}
+              {!isAuthenticated && (
+                <button onClick={handleGitHubSignIn} className="mt-2 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-forge-800 border border-border text-text-primary text-sm font-medium hover:border-border-hover hover:bg-forge-700 transition-all duration-200">
+                  <GitHubIcon /> Sign in with GitHub
+                </button>
+              )}
+              {isAuthenticated && user && (
+                <>
+                  <Link to="/profile" onClick={() => setMenuOpen(false)} className="mt-2 px-4 py-2.5 rounded-lg text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-forge-850 transition-colors duration-150">
+                    Profile
+                  </Link>
+                  <button onClick={() => { logout(); setMenuOpen(false); navigate('/'); }} className="px-4 py-2.5 rounded-lg text-left text-sm font-medium text-text-secondary hover:text-status-error hover:bg-forge-850 transition-colors duration-150">
+                    Sign out
+                  </button>
+                </>
+              )}
             </div>
           </motion.div>
         )}