skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions 1

Lab: replace horizontal-scroll craft tabs with a wrapping grid

Browse source 
On mobile the 10 craft filters (Coaches, Filmers, Photo, Editors, Builders,
Artists, Graffiti, Tattoo, Trainers, Music) were in a sideways-scrolling
strip, hiding options off-screen. Switch to a 5-column grid on phones (two
tidy rows of five) while keeping the flex-wrap layout on desktop, so every
craft is visible at a glance with no horizontal scrolling.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-08-10 23:07:13 +07:00
parent ceea96eac6
commit d476896efe
1 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/pages/LabPage.tsx
View file

@ -419,11 +419,12 @@ 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 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. */}
<div className="flex gap-1.5 sm:gap-2 overflow-x-auto scrollbar-none -mx-1 px-1 md:flex-wrap md:overflow-visible snap-x">
{/* 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. */}
<div className="grid grid-cols-5 gap-1.5 sm:gap-2 md:flex md:flex-wrap -mx-1 px-1">
{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'