From 598362a196745cfd03be16db65a73a14fdb230f5 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 3 Sep 2026 15:11:30 +0700
Subject: [PATCH] Fix date-window chips overflowing off the phone screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/pages/EventsPage.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index d5bdf73..4c33aba 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -82,11 +82,20 @@ type DateWindow = 'all' | 'today' | 'weekend' | 'week' | 'month';
 
 const DATE_WINDOW_LABELS: Record<Exclude<DateWindow, 'all'>, string> = {
   today: 'Today',
-  weekend: 'This Weekend',
+  weekend: 'Weekend',
   week: 'This Week',
   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
  * 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) ── */}
         {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) => {
               const active = dateWindow === w;
-              const label = w === 'all' ? 'Anytime' : DATE_WINDOW_LABELS[w];
+              const fullLabel = w === 'all' ? 'Anytime' : DATE_WINDOW_LABELS[w];
               return (
                 <button
                   key={w}
                   type="button"
                   onClick={() => setDateWindow(w)}
                   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
                       ? 'border-[#ccff00] bg-[#ccff00] text-black'
                       : '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>
               );
             })}