From 8110efe8211cb91424d74934d4886e9626e45c04 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 3 Sep 2026 15:08:45 +0700
Subject: [PATCH] Compress /events chrome on mobile so event cards reach above
 the fold

The mobile toolbar stacked 5 rows of controls (title, view tabs, upcoming/past
sub-tabs, search+city, date chips) before any card showed. Tightened for phones
without removing any feature or touching desktop:
- Toolbar vertical padding + section spacing reduced (py-2/space-y-2 on mobile)
- View tabs and Upcoming/Past sub-tabs use py-1.5/py-1 on mobile
- Date-window chips: smaller top margin + padding
- Results grid top margin reduced on mobile
- "N results" count line hidden on mobile (pure noise on a small screen)

All changes are md:-gated, so desktop is unchanged.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/pages/EventsPage.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index 5c1403c..d5bdf73 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -237,7 +237,7 @@ function EventsToolbar({
   const hasActiveChips = selectedTypes.length > 0 || trustFilter !== 'all' || sortBy !== 'recent';
 
   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-2 md:py-3 space-y-2 md:space-y-2.5">
       {/* Main view tabs: Events / Tours / Hosting */}
       <div className="flex items-center gap-2">
         {(['events', 'tours', ...(showHosting ? ['hosting'] as const : [])] as MainView[]).map((view) => {
@@ -251,7 +251,7 @@ function EventsToolbar({
               key={view}
               onClick={() => onViewChange(view)}
               className={cn(
-                'relative flex items-center gap-1.5 px-3 py-2 rounded-xl font-black text-xs uppercase tracking-wide transition-all duration-150 active:scale-95 flex-1 justify-center',
+                'relative flex items-center gap-1.5 px-3 py-1.5 md:py-2 rounded-xl font-black text-xs uppercase tracking-wide transition-all duration-150 active:scale-95 flex-1 justify-center',
                 isActive
                   ? a.active
                   : 'text-gray-500 bg-white/5 hover:bg-white/10 hover:text-white border border-transparent'
@@ -287,7 +287,7 @@ function EventsToolbar({
                 key={tab}
                 onClick={() => onTabChange(tab)}
                 className={cn(
-                  'flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-black uppercase tracking-wide transition-all',
+                  'flex-1 flex items-center justify-center gap-1.5 px-3 py-1 md:py-1.5 rounded-lg text-xs font-black uppercase tracking-wide transition-all',
                   isActive
                     ? 'bg-[#ccff00] text-black shadow-sm'
                     : 'text-gray-500 hover:text-gray-300'
@@ -403,9 +403,9 @@ function EventsToolbar({
         </div>
       )}
 
-      {/* Results count */}
+      {/* Results count — desktop only; on mobile it's just noise eating space */}
       {mainView !== 'hosting' && !isLoading && (
-        <p className="text-[11px] text-gray-500 font-semibold leading-none">
+        <p className="hidden md:block text-[11px] text-gray-500 font-semibold leading-none">
           {totalCount === 0 ? 'No results' : `${totalCount} result${totalCount !== 1 ? 's' : ''}`}
         </p>
       )}
@@ -1080,7 +1080,7 @@ export default function EventsPage() {
 
         {/* ── Quick date-window chips (events · upcoming) ── */}
         {mainView === 'events' && activeTab === 'upcoming' && (
-          <div className="mt-4 flex items-center gap-2 overflow-x-auto pb-1 scrollbar-none">
+          <div className="mt-2 md:mt-4 flex items-center gap-2 overflow-x-auto pb-1 scrollbar-none">
             {(['all', 'today', 'weekend', 'week', 'month'] as DateWindow[]).map((w) => {
               const active = dateWindow === w;
               const label = w === 'all' ? 'Anytime' : DATE_WINDOW_LABELS[w];
@@ -1090,7 +1090,7 @@ export default function EventsPage() {
                   type="button"
                   onClick={() => setDateWindow(w)}
                   className={cn(
-                    'flex-shrink-0 rounded-full border px-3 py-1.5 text-xs font-bold uppercase tracking-wide transition-all active:scale-95',
+                    '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',
                     active
                       ? 'border-[#ccff00] bg-[#ccff00] text-black'
                       : 'border-white/10 bg-white/5 text-gray-400 hover:border-white/20 hover:text-white',
@@ -1104,7 +1104,7 @@ export default function EventsPage() {
         )}
 
         {/* ── Results ── */}
-        <div className="mt-6">
+        <div className="mt-3 md:mt-6">
 
           {/* Hosting dashboard */}
           {mainView === 'hosting' && <HostingDashboard />}