From bc6c1e0c70db796d491bc2eea8cfcc706ccd1535 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 3 Oct 2026 22:16:08 +0700
Subject: [PATCH] feat(lab): tidier "Offer a service" menu

The dropdown was a wall of full-colour buttons that also ran off-screen. Now:
- one clean list with a small colour icon chip per role (the role's colour is
  kept as identity, not the whole row), neutral hover highlight;
- a "Offer a service" caption and a scrollable list capped at min(60vh,440px);
- "Get Rider Card" separated below a divider so it stays pinned and reachable.
---
 release-notes.txt     |  3 +++
 src/pages/LabPage.tsx | 40 ++++++++++++++++++++++++++++------------
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/release-notes.txt b/release-notes.txt
index 2120d98..879719b 100644
--- a/release-notes.txt
+++ b/release-notes.txt
@@ -28,6 +28,9 @@ v1.5.11
   a custom chat coordinator and "Sasquatch · Pro" naming.
 - Stash and the marketplace listing form now fit narrow phone screens — the
   header, item rows and condition buttons no longer overlap.
+- The Lab's "Offer" menu is now a tidy, scrollable list (small colour chips
+  instead of a wall of coloured buttons), with "Get Rider Card" pinned at the
+  bottom.
 - Marketplace reputation no longer shows a stuck "Loading…".
 
 ---
diff --git a/src/pages/LabPage.tsx b/src/pages/LabPage.tsx
index 07b44fb..c4f857c 100644
--- a/src/pages/LabPage.tsx
+++ b/src/pages/LabPage.tsx
@@ -413,7 +413,9 @@ function OfferFAB() {
     return () => document.removeEventListener('mousedown', handler);
   }, [open]);
 
-  const items = [
+  // Service offers — the colour is kept as a small icon chip, not a full row,
+  // so the menu reads as one list instead of a wall of buttons.
+  const serviceItems = [
     { to: '/become/coach', label: t('labUi.offerCoaching'), color: 'bg-[#ff0040] hover:bg-[#ff0040]/90', icon: GraduationCap },
     { to: '/become/filmer', label: t('labUi.offerFilming'), color: 'bg-orange-500 hover:bg-orange-600', icon: Video },
     { to: '/become/photographer', label: t('labUi.offerPhotography'), color: 'bg-indigo-600 hover:bg-indigo-700', icon: Camera },
@@ -427,7 +429,6 @@ function OfferFAB() {
     { to: '/become/judge', label: t('labUi.judgeEvents'), color: 'bg-yellow-500 hover:bg-yellow-600 text-black', icon: Gavel },
     { to: '/become/organizer', label: t('labUi.organizeEvents'), color: 'bg-teal-600 hover:bg-teal-700', icon: Tent },
     { to: '/become/barber', label: t('labUi.offerCuts'), color: 'bg-cyan-600 hover:bg-cyan-700', icon: Sparkles },
-    { to: '/card', label: t('labUi.getRiderCard'), color: 'bg-[#ccff00]/20 hover:bg-[#ccff00]/30 border border-[#ccff00]/50 text-[#ccff00]', icon: CreditCard },
   ];
 
   return (
@@ -446,25 +447,40 @@ function OfferFAB() {
         <span className="sm:hidden">{t('labUi.offer')}</span>
       </button>
 
-      {/* Dropdown */}
+      {/* Dropdown — one clean list; the role colour is a small icon chip, and
+          the Rider Card action stays pinned below the scrolling list. */}
       {open && (
-        <div className="absolute right-0 top-full mt-2 w-52 rounded-xl border border-white/10 bg-black/95 shadow-2xl shadow-black/60 backdrop-blur z-50 overflow-hidden">
-          <div className="p-1.5 space-y-0.5 max-h-[70vh] overflow-y-auto">
-            {items.map(({ to, label, color, icon: Icon }) => (
+        <div className="absolute right-0 top-full z-50 mt-2 w-64 overflow-hidden rounded-2xl border border-white/10 bg-black/95 shadow-2xl shadow-black/60 backdrop-blur">
+          <p className="px-3 pt-2.5 pb-1 text-[10px] font-black uppercase tracking-widest text-gray-500">
+            {t('labUi.offerServices')}
+          </p>
+          <div className="max-h-[min(60vh,440px)] space-y-0.5 overflow-y-auto p-1.5 pt-0.5">
+            {serviceItems.map(({ to, label, color, icon: Icon }) => (
               <Link
                 key={to}
                 to={to}
                 onClick={() => setOpen(false)}
-                className={cn(
-                  'flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-bold uppercase tracking-wide transition-all active:scale-95',
-                  color
-                )}
+                className="group flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm font-semibold text-gray-200 transition-colors hover:bg-white/[0.07]"
               >
-                <Icon className="h-4 w-4 flex-shrink-0" />
-                {label}
+                <span className={cn('flex h-7 w-7 shrink-0 items-center justify-center rounded-lg', color)}>
+                  <Icon className="h-4 w-4" />
+                </span>
+                <span className="min-w-0 flex-1 truncate">{label}</span>
               </Link>
             ))}
           </div>
+          <div className="border-t border-white/10 p-1.5">
+            <Link
+              to="/card"
+              onClick={() => setOpen(false)}
+              className="flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm font-semibold text-[#ccff00] transition-colors hover:bg-[#ccff00]/10"
+            >
+              <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg border border-[#ccff00]/40 bg-[#ccff00]/10">
+                <CreditCard className="h-4 w-4" />
+              </span>
+              {t('labUi.getRiderCard')}
+            </Link>
+          </div>
         </div>
       )}
     </div>