From c12acda86284e59c1c22cb3bd286fdd154d8c9ad Mon Sep 17 00:00:00 2001
From: Crownite <crownite@agentmail.to>
Date: Tue, 12 May 2026 09:14:42 -0400
Subject: [PATCH] feat: Polish mobile responsive for bounty cards, hero,
 navigation, and detail views

- BountyCard: responsive padding, reward text, meta row gap, abbreviated PR count, collapsible status label on xs
- HeroSection: responsive min-height, terminal card width, font sizes, CTA button sizing, stats strip wrapping
- BountyGrid: responsive heading, horizontal scroll filter pills on mobile
- BountyDetail: responsive padding, title sizing, repo name truncation
- index.css: add scrollbar-none utility class

All changes target 375px and 768px breakpoints as specified.
---
 frontend/src/components/bounty/BountyCard.tsx | 47 ++++++++++---------
 .../src/components/bounty/BountyDetail.tsx    | 40 ++++++++--------
 frontend/src/components/bounty/BountyGrid.tsx | 34 +++++++-------
 frontend/src/components/home/HeroSection.tsx  | 20 ++++----
 frontend/src/index.css                        |  9 ++++
 5 files changed, 80 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..4c24aac3d 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/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">
@@ -100,30 +100,31 @@ export function BountyCard({ bounty }: BountyCardProps) {
       {/* 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">
-          {formatCurrency(bounty.reward_amount, bounty.reward_token)}
+  {/* Row 4: Reward + Meta */}
+  <div className="flex items-center justify-between mt-3 gap-2">
+    <span className="font-mono text-base sm:text-lg font-semibold text-emerald whitespace-nowrap">
+      {formatCurrency(bounty.reward_amount, bounty.reward_token)}
+    </span>
+    <div className="flex items-center gap-2 sm:gap-3 text-xs text-text-muted shrink-0">
+      <span className="inline-flex items-center gap-1">
+        <GitPullRequest className="w-3.5 h-3.5" />
+        <span className="hidden xs:inline">{bounty.submission_count} PRs</span>
+        <span className="xs:hidden">{bounty.submission_count}</span>
+      </span>
+      {bounty.deadline && (
+        <span className="inline-flex items-center gap-1">
+          <Clock className="w-3.5 h-3.5" />
+          {timeLeft(bounty.deadline)}
         </span>
-        <div className="flex items-center gap-3 text-xs text-text-muted">
-          <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>
-          )}
-        </div>
-      </div>
+      )}
+    </div>
+  </div>
 
-      {/* Status badge */}
-      <span className={`absolute bottom-4 right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
-        <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
-        {statusLabel}
-      </span>
+  {/* Status badge */}
+  <span className={`absolute bottom-4 right-4 sm:right-5 text-xs font-medium inline-flex items-center gap-1 ${statusColor}`}>
+    <span className={`w-1.5 h-1.5 rounded-full ${dotColor}`} />
+    <span className="hidden xs:inline">{statusLabel}</span>
+  </span>
     </motion.div>
   );
 }
diff --git a/frontend/src/components/bounty/BountyDetail.tsx b/frontend/src/components/bounty/BountyDetail.tsx
index 65653fa8f..7f038ecdd 100644
--- a/frontend/src/components/bounty/BountyDetail.tsx
+++ b/frontend/src/components/bounty/BountyDetail.tsx
@@ -25,27 +25,27 @@ export function BountyDetail({ bounty }: BountyDetailProps) {
   };
 
   return (
-    <motion.div variants={fadeIn} initial="initial" animate="animate" className="max-w-4xl mx-auto px-4 py-8">
-      {/* Back link */}
-      <Link to="/" className="inline-flex items-center gap-2 text-sm text-text-muted hover:text-text-secondary transition-colors mb-6">
-        <ArrowLeft className="w-4 h-4" /> Back to Bounties
-      </Link>
+  <motion.div variants={fadeIn} initial="initial" animate="animate" className="max-w-4xl mx-auto px-3 sm:px-4 py-6 sm:py-8">
+    {/* Back link */}
+    <Link to="/" className="inline-flex items-center gap-2 text-sm text-text-muted hover:text-text-secondary transition-colors mb-4 sm:mb-6">
+      <ArrowLeft className="w-4 h-4" /> Back to Bounties
+    </Link>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Main content */}
-        <div className="lg:col-span-2 space-y-6">
-          {/* Title + meta */}
-          <div className="rounded-xl border border-border bg-forge-900 p-6">
-            <div className="flex items-start justify-between gap-4 mb-4">
-              <div className="flex-1">
-                <div className="flex items-center gap-2 mb-3 text-xs font-mono text-text-muted">
-                  {bounty.org_avatar_url && (
-                    <img src={bounty.org_avatar_url} alt="" className="w-4 h-4 rounded-full" />
-                  )}
-                  <span>{bounty.org_name}/{bounty.repo_name}</span>
-                  {bounty.issue_number && <span>#{bounty.issue_number}</span>}
-                </div>
-                <h1 className="font-sans text-2xl font-semibold text-text-primary">{bounty.title}</h1>
+    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      {/* Main content */}
+      <div className="lg:col-span-2 space-y-6">
+        {/* Title + meta */}
+        <div className="rounded-xl border border-border bg-forge-900 p-4 sm:p-6">
+          <div className="flex items-start justify-between gap-3 sm:gap-4 mb-4">
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2 mb-3 text-xs font-mono text-text-muted">
+                {bounty.org_avatar_url && (
+                  <img src={bounty.org_avatar_url} alt="" className="w-4 h-4 rounded-full" />
+                )}
+                <span className="truncate">{bounty.org_name}/{bounty.repo_name}</span>
+                {bounty.issue_number && <span>#{bounty.issue_number}</span>}
+              </div>
+              <h1 className="font-sans text-xl sm:text-2xl font-semibold text-text-primary leading-snug">{bounty.title}</h1>
               </div>
               <button
                 onClick={copyLink}
diff --git a/frontend/src/components/bounty/BountyGrid.tsx b/frontend/src/components/bounty/BountyGrid.tsx
index 7709ab94c..93c24b7ee 100644
--- a/frontend/src/components/bounty/BountyGrid.tsx
+++ b/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-3 sm: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"
@@ -53,21 +53,21 @@ export function BountyGrid() {
           </div>
         </div>
 
-        {/* Filter pills */}
-        <div className="flex items-center gap-2 flex-wrap mb-8">
-          {FILTER_SKILLS.map((skill) => (
-            <button
-              key={skill}
-              onClick={() => setActiveSkill(skill)}
-              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 ${
-                activeSkill === skill
-                  ? 'bg-forge-700 text-text-primary'
-                  : 'text-text-muted hover:text-text-secondary bg-forge-800'
-              }`}
-            >
-              {skill}
-            </button>
-          ))}
+  {/* Filter pills — horizontal scroll on mobile */}
+  <div className="flex items-center gap-2 overflow-x-auto pb-2 sm:pb-0 sm:flex-wrap mb-8 scrollbar-none">
+    {FILTER_SKILLS.map((skill) => (
+      <button
+        key={skill}
+        onClick={() => setActiveSkill(skill)}
+        className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors duration-150 whitespace-nowrap ${
+          activeSkill === skill
+            ? 'bg-forge-700 text-text-primary'
+            : 'text-text-muted hover:text-text-secondary bg-forge-800'
+        }`}
+      >
+        {skill}
+      </button>
+    ))}
         </div>
 
         {/* Loading state */}
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e37307166..481e803b4 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -87,7 +87,7 @@ 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">
+    <section className="relative min-h-[80vh] sm:min-h-[90vh] flex flex-col items-center justify-center px-3 sm:px-4 pt-20 sm:pt-24 pb-12 sm:pb-16 overflow-hidden">
       {/* Background layers */}
       <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" />
@@ -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-sm sm: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">
@@ -111,7 +111,7 @@ export function HeroSection() {
         </div>
 
         {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
+        <div className="p-4 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-3xl sm:text-4xl md:text-5xl font-bold text-text-primary tracking-wider text-center mt-8 sm:mt-10"
       >
         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-3 sm:mt-4 max-w-lg px-2"
       >
         Fund bounties. Ship code. Earn rewards.
       </motion.p>
@@ -174,12 +174,12 @@ export function HeroSection() {
         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"
+        className="flex flex-wrap items-center justify-center gap-3 sm:gap-4 mt-6 sm: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"
+            className="px-4 sm:px-6 py-2.5 sm: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"
           >
             Browse Bounties
           </Link>
@@ -188,7 +188,7 @@ export function HeroSection() {
         <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"
+            className="px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg border border-emerald text-emerald font-semibold text-sm hover:bg-emerald-bg transition-colors duration-200 inline-block"
           >
             Post a Bounty
           </Link>
@@ -198,7 +198,7 @@ export function HeroSection() {
           <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"
+              className="px-4 sm:px-6 py-2.5 sm: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"
             >
               <GitHubIcon /> GitHub
             </button>
@@ -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-x-4 gap-y-2 sm:gap-6 mt-6 sm:mt-8 font-mono text-xs sm:text-sm text-text-muted"
       >
         <span>
           <span className="text-text-primary font-semibold">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 33799d725..858635114 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -143,3 +143,12 @@ input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
+
+/* Hide scrollbar utility */
+.scrollbar-none {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+.scrollbar-none::-webkit-scrollbar {
+  display: none;
+}