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

Fix date-window chips overflowing off the phone screen

Browse source 
The chips (ANYTIME / TODAY / THIS WEEKEND / THIS WEEK / THIS MONTH) ran off the
right edge on mobile and got cut off. Now on phones they render as a 5-column
grid that fits the screen exactly — with compact labels (Any / Today / Wknd /
Week / Month) so nothing truncates. Desktop keeps the full-label flex row.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-09-03 15:11:30 +07:00
parent 8110efe821
commit 598362a196
1 changed files with 16 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/pages/EventsPage.tsx
View file

@ -82,11 +82,20 @@ type DateWindow = 'all' | 'today' | 'weekend' | 'week' | 'month';
const DATE_WINDOW_LABELS: Record<Exclude<DateWindow, 'all'>, string> = { const DATE_WINDOW_LABELS: Record<Exclude<DateWindow, 'all'>, string> = {
today: 'Today', today: 'Today',
weekend: 'This Weekend', weekend: 'Weekend',
week: 'This Week', week: 'This Week',
month: 'This Month', month: 'This Month',
}; };
/** Compact labels for the 5-across mobile grid (avoid truncation). */
const DATE_WINDOW_LABELS_SHORT: Record<DateWindow, string> = {
all: 'Any',
today: 'Today',
weekend: 'Wknd',
week: 'Week',
month: 'Month',
};
/** /**
* Returns [startSec, endSec) for a date window, in local time. `weekend` covers * Returns [startSec, endSec) for a date window, in local time. `weekend` covers
* the upcoming Sat+Sun (or the current weekend if it's already Sat/Sun). * the upcoming Sat+Sun (or the current weekend if it's already Sat/Sun).
@ -1080,23 +1089,25 @@ export default function EventsPage() {
{/* ── Quick date-window chips (events · upcoming) ── */} {/* ── Quick date-window chips (events · upcoming) ── */}
{mainView === 'events' && activeTab === 'upcoming' && ( {mainView === 'events' && activeTab === 'upcoming' && (
<div className="mt-2 md:mt-4 flex items-center gap-2 overflow-x-auto pb-1 scrollbar-none"> <div className="mt-2 md:mt-4 grid grid-cols-5 gap-1.5 md:flex md:items-center md:gap-2">
{(['all', 'today', 'weekend', 'week', 'month'] as DateWindow[]).map((w) => { {(['all', 'today', 'weekend', 'week', 'month'] as DateWindow[]).map((w) => {
const active = dateWindow === w; const active = dateWindow === w;
const label = w === 'all' ? 'Anytime' : DATE_WINDOW_LABELS[w]; const fullLabel = w === 'all' ? 'Anytime' : DATE_WINDOW_LABELS[w];
return ( return (
<button <button
key={w} key={w}
type="button" type="button"
onClick={() => setDateWindow(w)} onClick={() => setDateWindow(w)}
className={cn( className={cn(
'flex-shrink-0 rounded-full border px-3 py-1 md:py-1.5 text-xs font-bold uppercase tracking-wide transition-all active:scale-95', 'rounded-full border px-1.5 py-1.5 text-[10px] leading-none md:flex-shrink-0 md:px-3 md:text-xs font-bold uppercase tracking-tight md:tracking-wide transition-all active:scale-95 text-center',
active active
? 'border-[#ccff00] bg-[#ccff00] text-black' ? 'border-[#ccff00] bg-[#ccff00] text-black'
: 'border-white/10 bg-white/5 text-gray-400 hover:border-white/20 hover:text-white', : 'border-white/10 bg-white/5 text-gray-400 hover:border-white/20 hover:text-white',
)} )}
> >
{label} {/* Short label on phones (fits 5-across), full label on desktop */}
<span className="md:hidden">{DATE_WINDOW_LABELS_SHORT[w]}</span>
<span className="hidden md:inline">{fullLabel}</span>
</button> </button>
); );
})} })}