skatespots/SkateSpots
1
0
Fork 0
Code Issues Pull requests Projects Releases 4 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 ( 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"> <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 {/* Tab row — a wrapping grid so every craft is visible at a glance with
grid would be too cramped, so tabs scroll sideways on small screens and no horizontal scrolling. 10 crafts lay out as two tidy rows of five on
wrap comfortably on wide ones. Icon-over-label stack keeps each tab phones, and flex to a single line on wide screens. Icon-over-label
compact but tappable; a count badge floats in the corner. */} stack keeps each tab compact but tappable; a count badge floats in
<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"> 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 }) => { {tabs.map(({ key, label, icon: Icon }) => {
const isActive = serviceType === key; const isActive = serviceType === key;
const a = ACCENT[key]; const a = ACCENT[key];
@ -432,7 +433,7 @@ function LabToolbar({
key={key} key={key}
onClick={() => onServiceChange(key)} onClick={() => onServiceChange(key)}
className={cn( 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 isActive
? a.active ? a.active
: 'text-gray-500 bg-white/5 hover:bg-white/10 hover:text-white border border-transparent' : 'text-gray-500 bg-white/5 hover:bg-white/10 hover:text-white border border-transparent'