From 47d226245fa6544762d0f929a700a24d399e3031 Mon Sep 17 00:00:00 2001
From: Aldo Rizona <aldorizona10@gmail.com>
Date: Thu, 18 Jun 2026 07:41:13 +0700
Subject: [PATCH] feat: implement mobile responsive polish for bounty cards and
 hero section

---
 frontend/src/components/bounty/BountyCard.tsx | 16 +++++++++-------
 frontend/src/components/bounty/BountyGrid.tsx |  4 ++--
 frontend/src/components/home/HeroSection.tsx  | 12 ++++++------
 frontend/src/components/layout/Navbar.tsx     |  2 +-
 4 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/bounty/BountyCard.tsx b/frontend/src/components/bounty/BountyCard.tsx
index aa974a474..98f0e848a 100644
--- a/frontend/src/components/bounty/BountyCard.tsx
+++ b/frontend/src/components/bounty/BountyCard.tsx
@@ -101,11 +101,11 @@ export function BountyCard({ bounty }: BountyCardProps) {
       <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="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mt-3">
+        <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">
+        <div className="flex items-center gap-3 text-[10px] sm: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
@@ -120,10 +120,12 @@ export function BountyCard({ bounty }: BountyCardProps) {
       </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>
+      <div className="mt-4 flex items-center justify-end">
+        <span className={`text-[10px] sm: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/BountyGrid.tsx b/frontend/src/components/bounty/BountyGrid.tsx
index 7709ab94c..c107c8e73 100644
--- a/frontend/src/components/bounty/BountyGrid.tsx
+++ b/frontend/src/components/bounty/BountyGrid.tsx
@@ -54,12 +54,12 @@ 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 pb-2 scrollbar-hide">
           {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 ${
+              className={`px-3 py-1.5 rounded-md text-xs sm:text-sm font-medium whitespace-nowrap transition-colors duration-150 ${
                 activeSkill === skill
                   ? 'bg-forge-700 text-text-primary'
                   : 'text-text-muted hover:text-text-secondary bg-forge-800'
diff --git a/frontend/src/components/home/HeroSection.tsx b/frontend/src/components/home/HeroSection.tsx
index e37307166..1ecac0492 100644
--- a/frontend/src/components/home/HeroSection.tsx
+++ b/frontend/src/components/home/HeroSection.tsx
@@ -111,10 +111,10 @@ export function HeroSection() {
         </div>
 
         {/* Terminal body */}
-        <div className="p-5 font-mono text-sm leading-relaxed">
-          <div className="overflow-hidden">
+        <div className="p-5 font-mono text-xs sm:text-sm leading-relaxed">
+          <div className="overflow-hidden break-all sm:break-normal">
             <span className="text-emerald">$ </span>
-            <span className="text-text-secondary overflow-hidden whitespace-nowrap inline-block animate-typewriter">
+            <span className="text-text-secondary inline-block animate-typewriter">
               forge bounty --reward 100 --lang typescript --tier 2
             </span>
             {typewriterDone && (
@@ -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-6 gap-y-3 mt-8 font-mono text-xs sm:text-sm text-text-muted text-center"
       >
         <span>
           <span className="text-text-primary font-semibold">
@@ -219,14 +219,14 @@ export function HeroSection() {
           </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>
-        <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} />
diff --git a/frontend/src/components/layout/Navbar.tsx b/frontend/src/components/layout/Navbar.tsx
index e4ec31b03..9df19fa50 100644
--- a/frontend/src/components/layout/Navbar.tsx
+++ b/frontend/src/components/layout/Navbar.tsx
@@ -157,7 +157,7 @@ export function Navbar() {
           ) : (
             <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"
+              className="inline-flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg bg-forge-800 border border-border hover:border-border-hover text-text-primary text-xs sm:text-sm font-medium transition-all duration-200 hover:bg-forge-700"
             >
               <GitHubIcon />
               <span className="hidden sm:block">Sign in with GitHub</span>