diff --git a/src/pages/LabPage.tsx b/src/pages/LabPage.tsx index 4025b8a..59bb78a 100644 --- a/src/pages/LabPage.tsx +++ b/src/pages/LabPage.tsx @@ -419,11 +419,12 @@ function LabToolbar({ return (
- {/* Tab row — horizontally scrollable pill strip. With 10 crafts a fixed - grid would be too cramped, so tabs scroll sideways on small screens and - wrap comfortably on wide ones. Icon-over-label stack keeps each tab - compact but tappable; a count badge floats in the corner. */} -
+ {/* Tab row — a wrapping grid so every craft is visible at a glance with + no horizontal scrolling. 10 crafts lay out as two tidy rows of five on + phones, and flex to a single line on wide screens. Icon-over-label + stack keeps each tab compact but tappable; a count badge floats in + the corner. */} +
{tabs.map(({ key, label, icon: Icon }) => { const isActive = serviceType === key; const a = ACCENT[key]; @@ -432,7 +433,7 @@ function LabToolbar({ key={key} onClick={() => onServiceChange(key)} className={cn( - 'relative flex flex-col items-center justify-center gap-1 px-2.5 py-2 rounded-xl font-black text-[10px] sm:text-xs uppercase tracking-tight sm:tracking-wide transition-all duration-150 active:scale-95 flex-shrink-0 snap-start min-w-[60px]', + 'relative flex flex-col items-center justify-center gap-1 px-1.5 sm:px-2.5 py-2 rounded-xl font-black text-[10px] sm:text-xs uppercase tracking-tight sm:tracking-wide transition-all duration-150 active:scale-95 md:min-w-[60px]', isActive ? a.active : 'text-gray-500 bg-white/5 hover:bg-white/10 hover:text-white border border-transparent'