- {/* 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'