From cc2e35f569d46670ed4eb75d63c5d8814e120129 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Fri, 24 Jul 2026 18:56:06 +0700
Subject: [PATCH] Lab tabs: fixed 5-across grid instead of horizontal scroll

The Lab category tabs (Coaches/Filmers/Photo/Editors/Builders) overflowed
the viewport and scrolled sideways on phones, hiding Builders. Replace the
overflow-x row with a 5-column grid of compact icon-over-label tabs so all
five are visible at once without lateral scrolling, with the count badge
floated to the corner so it never widens a tab.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/LabPage.tsx | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/pages/LabPage.tsx b/src/pages/LabPage.tsx
index 62d7ccb..c2ec459 100644
--- a/src/pages/LabPage.tsx
+++ b/src/pages/LabPage.tsx
@@ -282,8 +282,10 @@ function LabToolbar({
 
   return (
     <div className="sticky top-14 md:top-16 z-30 bg-black/95 backdrop-blur border-b border-white/5 -mx-4 px-4 py-3 space-y-2.5">
-      {/* Tab row — horizontally scrollable so 5 tabs stay clean on small phones */}
-      <div className="flex items-center gap-1.5 sm:gap-2 overflow-x-auto scrollbar-none -mx-1 px-1">
+      {/* Tab row — fixed 5-across grid so every category is visible without
+          horizontal scrolling. Icon-over-label stack keeps each tab compact
+          but tappable on small phones; a count badge floats in the corner. */}
+      <div className="grid grid-cols-5 gap-1.5 sm:gap-2">
         {tabs.map(({ key, label, icon: Icon }) => {
           const isActive = serviceType === key;
           const a = ACCENT[key];
@@ -292,23 +294,19 @@ function LabToolbar({
               key={key}
               onClick={() => onServiceChange(key)}
               className={cn(
-                'relative flex items-center gap-1 sm:gap-1.5 px-2.5 sm:px-3 py-2 rounded-xl font-black text-[11px] sm:text-xs uppercase tracking-wide transition-all duration-150 active:scale-95 flex-1 min-w-fit justify-center whitespace-nowrap',
+                'relative flex flex-col items-center justify-center gap-1 px-1 py-2 rounded-xl font-black text-[10px] sm:text-xs uppercase tracking-tight sm:tracking-wide transition-all duration-150 active:scale-95',
                 isActive
                   ? a.active
                   : 'text-gray-500 bg-white/5 hover:bg-white/10 hover:text-white border border-transparent'
               )}
             >
-              <Icon className="h-3.5 w-3.5 flex-shrink-0" />
-              <span>{label}</span>
-              {/* Count badge */}
-              {!isLoading && (
+              <Icon className="h-4 w-4 flex-shrink-0" />
+              <span className="leading-none">{label}</span>
+              {/* Count badge — floats top-right so it never widens the tab */}
+              {!isLoading && counts[key] > 0 && (
                 <span className={cn(
-                  'ml-0.5 min-w-[18px] h-[18px] px-1 text-[9px] font-black rounded-full flex items-center justify-center leading-none',
-                  counts[key] > 0
-                    ? isActive
-                      ? 'bg-white/25 text-white'
-                      : 'bg-white/10 text-gray-400'
-                    : 'bg-white/5 text-gray-600'
+                  'absolute -top-1 -right-1 min-w-[16px] h-[16px] px-1 text-[9px] font-black rounded-full flex items-center justify-center leading-none border border-black/40',
+                  isActive ? 'bg-white text-black' : 'bg-white/15 text-gray-300'
                 )}>
                   {counts[key]}
                 </span>