@devrongx/games 0.4.38 → 0.4.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devrongx/games",
-  "version": "0.4.38",
+  "version": "0.4.39",
   "description": "Game UI components for sports prediction markets",
   "license": "MIT",
   "main": "./src/index.ts",

package/src/matches/MatchCalendar.tsx

@@ -3,27 +3,19 @@
 
 import { useRef, useMemo, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Calendar, MapPin, Loader2, Trophy, Zap, Target, Users } from "lucide-react";
+import { Calendar, MapPin, Loader2, Trophy, Target, Users, Zap } from "lucide-react";
 import { useTDMatches } from "./useTDMatches";
 import { useTDPools } from "../pools/hooks";
 import type { ITDPool } from "../pools/types";
 import { TDGameType, TDPoolStatus } from "../pools/types";
 import type { ITDMatch } from "./types";
 
-// TD match status enum values
-const MATCH_STATUS = {
-  UPCOMING: 1,
-  LIVE: 2,
-  COMPLETED: 5,
-} as const;
-
+const MATCH_STATUS = { UPCOMING: 1, LIVE: 2, COMPLETED: 5 } as const;
 const OUTFIT = { fontFamily: "Outfit, sans-serif" };
 
 /* ── Date helpers ── */
 
-function toLocalDate(iso: string): Date {
-  return new Date(iso);
-}
+function toLocalDate(iso: string): Date { return new Date(iso); }
 
 function formatDayMonth(d: Date): string {
   return `${d.getDate()} ${d.toLocaleString("en-US", { month: "short" }).toUpperCase()}`;
@@ -41,9 +33,7 @@ function isSameDay(a: Date, b: Date): boolean {
   return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
 }
 
-function isToday(d: Date): boolean {
-  return isSameDay(d, new Date());
-}
+function isToday(d: Date): boolean { return isSameDay(d, new Date()); }
 
 function isTomorrow(d: Date): boolean {
   const t = new Date();
@@ -62,7 +52,6 @@ function getTeamShortName(match: ITDMatch, team: "a" | "b"): string {
   return t.short_name || t.name.slice(0, 3).toUpperCase();
 }
 
-/** Map popularity 0-10 to border shine opacity (0 = no shine, 10 = full intensity) */
 function getShineOpacity(popularity: number): number {
   if (popularity <= 0) return 0;
   return Math.min(popularity / 10, 1);
@@ -73,10 +62,9 @@ function humanizeCount(n: number): string {
   return String(n);
 }
 
-/** Determine if a pool is free based on display_price and entry_fee */
 function isFreePool(pool: ITDPool): boolean {
   const dp = (pool.display_price || "").toLowerCase().trim();
-  return dp === "" || dp === "free" || (pool.entry_fee === 0 && dp === "");
+  return dp === "" || dp === "free" || (pool.entry_fee === 0 && !dp);
 }
 
 /* ── Grouping: by date ── */
@@ -91,40 +79,31 @@ interface IMatchDay {
 
 function groupByDate(matches: ITDMatch[]): IMatchDay[] {
   const map = new Map<string, { date: Date; matches: ITDMatch[] }>();
-
   for (const m of matches) {
     if (!m.scheduled_start_at) continue;
     const d = toLocalDate(m.scheduled_start_at);
     const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
     const existing = map.get(key);
-    if (existing) {
-      existing.matches.push(m);
-    } else {
-      map.set(key, { date: d, matches: [m] });
-    }
+    if (existing) { existing.matches.push(m); }
+    else { map.set(key, { date: d, matches: [m] }); }
   }
-
   return Array.from(map.entries())
     .sort(([a], [b]) => a.localeCompare(b))
     .map(([dateKey, { date, matches: dayMatches }]) => ({
-      dateKey,
-      date,
-      label: getDayLabel(date),
-      dayMonth: formatDayMonth(date),
-      matches: dayMatches,
+      dateKey, date, label: getDayLabel(date), dayMonth: formatDayMonth(date), matches: dayMatches,
     }));
 }
 
-/* ── Pool row item ── */
+/* ── Pool display ── */
 
-const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; bg: string; label: string }> = {
-  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Pre-Match Bets" },
-  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", bg: "rgba(153,69,255,0.06)", label: "Fantasy 11" },
-  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", bg: "rgba(255,153,69,0.06)", label: "Ball Sequence" },
+const GAME_TYPE_STYLE: Record<number, { icon: typeof Target; color: string; label: string }> = {
+  [TDGameType.PRE_MATCH_BETS]: { icon: Target, color: "#22E3E8", label: "Pre-Match Bets" },
+  [TDGameType.FANTASY_11]: { icon: Users, color: "#9945FF", label: "Fantasy 11" },
+  [TDGameType.BALL_SEQUENCE]: { icon: Zap, color: "#FF9945", label: "Ball Sequence" },
 };
 
-function PoolRow({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) => void }) {
-  const style = GAME_TYPE_STYLE[pool.game_type] ?? { icon: Target, color: "#22E3E8", bg: "rgba(34,227,232,0.06)", label: "Play" };
+/** Tiny inline pill for a single pool */
+function PoolChip({ pool, color, onPress }: { pool: ITDPool; color: string; onPress: (p: ITDPool) => void }) {
   const isClosed = pool.status === TDPoolStatus.CLOSED || pool.status === TDPoolStatus.RESOLVING || pool.status === TDPoolStatus.COMPLETE;
   const isOpen = pool.status === TDPoolStatus.OPEN;
   const free = isFreePool(pool);
@@ -132,31 +111,26 @@ function PoolRow({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) =>
   return (
     <motion.button
       onClick={() => onPress(pool)}
-      whileTap={{ scale: 0.96 }}
-      className="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-lg"
+      whileTap={{ scale: 0.92 }}
+      className="flex items-center gap-1 px-2 py-1 rounded-md shrink-0"
       style={{
-        background: isOpen ? style.bg.replace("0.06", "0.08") : style.bg,
-        border: `1px solid ${style.color}${isOpen ? "30" : "18"}`,
-        opacity: isClosed ? 0.45 : 1,
+        background: `${color}${isOpen ? "14" : "0a"}`,
+        border: `1px solid ${color}${isOpen ? "40" : "20"}`,
+        opacity: isClosed ? 0.4 : 1,
       }}
     >
-      {/* Live dot */}
       {isOpen && (
-        <span className="relative flex h-1.5 w-1.5 shrink-0">
-          <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-60" style={{ backgroundColor: style.color }} />
-          <span className="relative inline-flex rounded-full h-1.5 w-1.5" style={{ backgroundColor: style.color }} />
+        <span className="relative flex h-1 w-1 shrink-0">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-50" style={{ backgroundColor: color }} />
+          <span className="relative inline-flex rounded-full h-1 w-1" style={{ backgroundColor: color }} />
         </span>
       )}
-
-      {/* Label: "Play for Free" or cost */}
-      <span className="flex-1 text-left text-[9px] font-bold tracking-wide" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.9)" : "#fff" }}>
-        {free ? "Play for Free" : pool.display_price}
+      <span className="text-[9px] font-bold" style={{ ...OUTFIT, color: free ? "rgba(255,255,255,0.8)" : "#fff" }}>
+        {free ? "Free" : pool.display_price}
       </span>
-
-      {/* Entry count for non-free pools, or always if there are entries */}
       {pool.entry_count > 0 && (
-        <span className="text-[8px] font-medium shrink-0" style={{ ...OUTFIT, color: `${style.color}99` }}>
-          {humanizeCount(pool.entry_count)} in
+        <span className="text-[7px]" style={{ ...OUTFIT, color: `${color}90` }}>
+          {humanizeCount(pool.entry_count)}
         </span>
       )}
     </motion.button>
@@ -164,10 +138,7 @@ function PoolRow({ pool, onPress }: { pool: ITDPool; onPress: (pool: ITDPool) =>
 }
 
 function MatchGameSection({
-  matchId,
-  isCompleted,
-  onPoolPress,
-  partnerSource,
+  matchId, isCompleted, onPoolPress, partnerSource,
 }: {
   matchId: number;
   isCompleted: boolean;
@@ -175,14 +146,10 @@ function MatchGameSection({
   partnerSource?: string;
 }) {
   const { pools, loading } = useTDPools(matchId, partnerSource);
-
   if (isCompleted || loading || pools.length === 0) return null;
 
-  // Group by game_type (integer)
   const grouped: Record<number, ITDPool[]> = {};
-  for (const p of pools) {
-    (grouped[p.game_type] ??= []).push(p);
-  }
+  for (const p of pools) { (grouped[p.game_type] ??= []).push(p); }
 
   const gameTypes = (Object.keys(grouped) as unknown as number[])
     .map(Number)
@@ -190,38 +157,37 @@ function MatchGameSection({
   if (gameTypes.length === 0) return null;
 
   return (
-    <div className="flex flex-col gap-2 mt-1.5 pt-2" style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
+    <div className="flex flex-col gap-1.5 mt-1.5 pt-1.5" style={{ borderTop: "1px solid rgba(255,255,255,0.07)" }}>
       {gameTypes.map((gt) => {
         const style = GAME_TYPE_STYLE[gt];
         const Icon = style.icon;
-        // Sort: free pools first, then by display_price ascending
+        // Sort: free first, then by display_price
         const sorted = [...grouped[gt]].sort((a, b) => {
-          const aFree = isFreePool(a) ? 0 : 1;
-          const bFree = isFreePool(b) ? 0 : 1;
-          if (aFree !== bFree) return aFree - bFree;
+          const af = isFreePool(a) ? 0 : 1;
+          const bf = isFreePool(b) ? 0 : 1;
+          if (af !== bf) return af - bf;
           return a.entry_fee - b.entry_fee;
         });
+        // Deduplicate: keep only one free pool per game type
+        const seen = new Set<string>();
+        const deduped = sorted.filter((p) => {
+          const key = isFreePool(p) ? "free" : p.display_price;
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        });
 
         return (
           <div key={gt} className="flex flex-col gap-1">
-            {/* Game type pill header */}
-            <div className="flex items-center gap-1 px-0.5 mb-0.5">
-              <Icon size={9} style={{ color: style.color }} />
-              <span className="text-[8px] barlowcondensedBold tracking-wide" style={{ color: style.color }}>
+            <div className="flex items-center gap-1">
+              <Icon size={8} style={{ color: style.color }} />
+              <span className="text-[7px] barlowcondensedBold tracking-wider uppercase" style={{ color: `${style.color}cc` }}>
                 {style.label}
               </span>
             </div>
-            {/* Pool rows */}
-            <div className="flex flex-col gap-1">
-              {sorted.map((pool, idx) => (
-                <motion.div
-                  key={pool.id}
-                  initial={{ opacity: 0, y: 4 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: idx * 0.03, duration: 0.2, ease: "easeOut" }}
-                >
-                  <PoolRow pool={pool} onPress={onPoolPress ?? (() => {})} />
-                </motion.div>
+            <div className="flex gap-1 flex-wrap">
+              {deduped.map((pool) => (
+                <PoolChip key={pool.id} pool={pool} color={style.color} onPress={onPoolPress ?? (() => {})} />
               ))}
             </div>
           </div>
@@ -231,7 +197,7 @@ function MatchGameSection({
   );
 }
 
-/* ── Match card with border shine animation ── */
+/* ── Match card ── */
 
 function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onPoolPress?: (pool: ITDPool, match: ITDMatch) => void; partnerSource?: string }) {
   const isLive = match.status === MATCH_STATUS.LIVE;
@@ -243,7 +209,6 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
 
   return (
     <div className="relative w-full rounded-xl p-[1px] overflow-hidden">
-      {/* Spinning border shine — intensity based on popularity */}
       {showShine && (
         <div
           className="absolute inset-[-50%] pointer-events-none"
@@ -255,38 +220,21 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
           }}
         />
       )}
-
-      {/* Static border for no-shine / completed */}
       {!showShine && (
-        <div
-          className="absolute inset-0 rounded-xl"
-          style={{
-            border: isCompleted
-              ? "1px solid rgba(255,255,255,0.06)"
-              : "1px solid rgba(255,255,255,0.08)",
-          }}
-        />
+        <div className="absolute inset-0 rounded-xl" style={{ border: isCompleted ? "1px solid rgba(255,255,255,0.06)" : "1px solid rgba(255,255,255,0.08)" }} />
       )}
 
       <motion.div
-        className="relative flex flex-col gap-1.5 rounded-xl px-3 py-2.5"
+        className="relative flex flex-col gap-1 rounded-xl px-2.5 py-2"
         style={{
           background: isLive
             ? "linear-gradient(160deg, rgba(14,10,24,0.98) 0%, rgba(10,8,20,0.98) 100%)"
             : "rgba(10,10,18,0.98)",
         }}
-        whileHover={{ backgroundColor: "rgba(18,18,28,0.98)" }}
-        transition={{ duration: 0.2 }}
       >
-        {/* Time + live indicator */}
-        <div className="flex items-center justify-between gap-1">
-          <span
-            className="text-[10px] font-semibold"
-            style={{
-              ...OUTFIT,
-              color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.45)" : "rgba(255,255,255,0.7)",
-            }}
-          >
+        {/* Time row */}
+        <div className="flex items-center justify-between">
+          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: isLive ? "#f83cc5" : isCompleted ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.6)" }}>
             {time}
           </span>
           {isLive && (
@@ -295,51 +243,38 @@ function MatchCard({ match, onPoolPress, partnerSource }: { match: ITDMatch; onP
                 <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#f83cc5] opacity-75" />
                 <span className="relative inline-flex rounded-full h-1.5 w-1.5 bg-[#f83cc5]" />
               </span>
-              <span className="text-[8px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>
-                LIVE
-              </span>
+              <span className="text-[7px] barlowcondensedBold tracking-widest" style={{ color: "#f83cc5" }}>LIVE</span>
             </div>
           )}
           {isCompleted && match.winner && (
-            <span className="text-[8px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.5)" }}>
+            <span className="text-[7px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
               {match.winner.short_name || match.winner.name} won
             </span>
           )}
         </div>
 
         {/* Teams */}
-        <div className="flex items-center gap-2 justify-center">
-          <span
-            className="barlowcondensedBold text-[20px] leading-none tracking-wide"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
-          >
+        <div className="flex items-center gap-1.5 justify-center">
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
             {getTeamShortName(match, "a")}
           </span>
-          <span className="text-[9px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.45)" }}>
-            vs
-          </span>
-          <span
-            className="barlowcondensedBold text-[20px] leading-none tracking-wide"
-            style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}
-          >
+          <span className="text-[8px] font-semibold" style={{ ...OUTFIT, color: "rgba(255,255,255,0.4)" }}>vs</span>
+          <span className="barlowcondensedBold text-[18px] leading-none tracking-wide" style={{ color: isCompleted ? "rgba(255,255,255,0.4)" : "#fff" }}>
             {getTeamShortName(match, "b")}
           </span>
         </div>
 
         {/* Venue */}
         {venue && (
-          <div className="flex items-center gap-1 justify-center">
-            <MapPin size={8} style={{ color: "rgba(255,255,255,0.45)" }} />
-            <span
-              className="text-[8px] truncate max-w-[120px]"
-              style={{ ...OUTFIT, color: "rgba(255,255,255,0.6)" }}
-            >
+          <div className="flex items-center gap-0.5 justify-center">
+            <MapPin size={7} style={{ color: "rgba(255,255,255,0.4)" }} />
+            <span className="text-[7px] truncate max-w-[110px]" style={{ ...OUTFIT, color: "rgba(255,255,255,0.55)" }}>
               {venue}
             </span>
           </div>
         )}
 
-        {/* Game modes — driven by real pools */}
+        {/* Pools */}
         <MatchGameSection
           matchId={match.id}
           isCompleted={isCompleted}
@@ -363,37 +298,26 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
       initial={{ opacity: 0, y: 10 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.35, delay: index * 0.04, ease: [0.25, 0.46, 0.45, 0.94] }}
-      className="shrink-0 flex flex-col gap-2"
-      style={{ scrollSnapAlign: "start", width: "160px" }}
+      className="shrink-0 flex flex-col gap-1.5"
+      style={{ scrollSnapAlign: "start", width: "150px" }}
     >
-      {/* Day header */}
       <div className="flex flex-col items-center gap-0.5 pb-1">
         <span
-          className="text-[10px] barlowcondensedBold tracking-widest"
-          style={{
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.9)",
-          }}
+          className="text-[9px] barlowcondensedBold tracking-widest"
+          style={{ color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.85)" }}
         >
           {day.label}
         </span>
         <span
-          className="text-[12px] font-semibold"
-          style={{
-            ...OUTFIT,
-            color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.35)" : "#fff",
-          }}
+          className="text-[11px] font-semibold"
+          style={{ ...OUTFIT, color: hasLive ? "#f83cc5" : hasToday ? "#22E3E8" : allCompleted ? "rgba(255,255,255,0.3)" : "#fff" }}
         >
           {day.dayMonth}
         </span>
         {(hasToday || hasLive) && (
-          <div
-            className="w-5 h-[2px] rounded-full mt-0.5"
-            style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }}
-          />
+          <div className="w-4 h-[1.5px] rounded-full mt-0.5" style={{ background: hasLive ? "#f83cc5" : "#22E3E8" }} />
         )}
       </div>
-
-      {/* Match cards for the day */}
       {day.matches.map((match) => (
         <MatchCard key={match.id} match={match} onPoolPress={onPoolPress} partnerSource={partnerSource} />
       ))}
@@ -401,26 +325,19 @@ function DayColumn({ day, index, onPoolPress, partnerSource }: { day: IMatchDay;
   );
 }
 
-/* ── Main calendar component ── */
+/* ── Main calendar ── */
 
 interface MatchCalendarProps {
   tournamentId?: number;
-  /** Called when user taps a pool pill. Receives both the pool and its parent match. */
   onPoolPress?: (pool: ITDPool, match: ITDMatch) => void;
-  /** Filter pools to a specific partner source (e.g. "iamgame") */
   partnerSource?: string;
 }
 
 export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: MatchCalendarProps) {
   const scrollRef = useRef<HTMLDivElement>(null);
-  const { matches, isLoading, error } = useTDMatches({
-    tournamentId,
-    limit: 100,
-  });
-
+  const { matches, isLoading, error } = useTDMatches({ tournamentId, limit: 100 });
   const days = useMemo(() => groupByDate(matches), [matches]);
 
-  // Auto-scroll to today or first upcoming day
   const scrollTargetIndex = useMemo(() => {
     const tIdx = days.findIndex((d) => isToday(d.date));
     if (tIdx >= 0) return tIdx;
@@ -432,11 +349,8 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
 
   useEffect(() => {
     if (scrollRef.current && scrollTargetIndex > 0) {
-      const container = scrollRef.current;
-      const target = container.children[scrollTargetIndex] as HTMLElement;
-      if (target) {
-        container.scrollTo({ left: target.offsetLeft - 20, behavior: "smooth" });
-      }
+      const target = scrollRef.current.children[scrollTargetIndex] as HTMLElement;
+      if (target) scrollRef.current.scrollTo({ left: target.offsetLeft - 16, behavior: "smooth" });
     }
   }, [scrollTargetIndex, days]);
 
@@ -453,42 +367,33 @@ export function MatchCalendar({ tournamentId, onPoolPress, partnerSource }: Matc
   if (error || matches.length === 0) return null;
 
   return (
-    <div className="relative z-30 w-full mt-6 mb-4">
-      {/* Tournament info header */}
+    <div className="relative z-30 w-full mt-5 mb-3">
       {tournament && (
-        <div className="px-5 mb-3">
-          <div className="flex items-center gap-2 mb-1">
-            <Trophy size={14} style={{ color: "#22E3E8" }} />
-            <span className="barlowcondensedBold text-[16px] tracking-wide text-white">
-              {tournament.name}
-            </span>
+        <div className="px-5 mb-2.5">
+          <div className="flex items-center gap-2 mb-0.5">
+            <Trophy size={13} style={{ color: "#22E3E8" }} />
+            <span className="barlowcondensedBold text-[15px] tracking-wide text-white">{tournament.name}</span>
           </div>
           <div className="flex items-center gap-3">
             {tournament.start_date && tournament.end_date && (
-              <span className="text-[11px] text-white" style={OUTFIT}>
+              <span className="text-[10px] text-white/50" style={OUTFIT}>
                 {formatDayMonth(toLocalDate(tournament.start_date))} – {formatDayMonth(toLocalDate(tournament.end_date))}
               </span>
             )}
-            <span className="text-[11px] text-white" style={OUTFIT}>
-              {matches.length} matches announced
-            </span>
+            <span className="text-[10px] text-white/50" style={OUTFIT}>{matches.length} matches</span>
           </div>
         </div>
       )}
 
-      {/* Section header */}
-      <div className="flex items-center gap-2 px-5 mb-3">
-        <Calendar size={13} style={{ color: "#22E3E8" }} />
-        <span className="barlowCondensedSemiBold text-[14px] tracking-wider text-white">
-          SCHEDULE
-        </span>
-        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.08)" }} />
+      <div className="flex items-center gap-2 px-5 mb-2.5">
+        <Calendar size={12} style={{ color: "#22E3E8" }} />
+        <span className="barlowCondensedSemiBold text-[13px] tracking-wider text-white">SCHEDULE</span>
+        <div className="flex-1 h-px" style={{ background: "rgba(255,255,255,0.07)" }} />
       </div>
 
-      {/* Scrollable day columns */}
       <div
         ref={scrollRef}
-        className="flex gap-3 overflow-x-auto px-5 pb-4 scrollbar-hide"
+        className="flex gap-2.5 overflow-x-auto px-5 pb-3 scrollbar-hide"
         style={{ scrollSnapType: "x mandatory", WebkitOverflowScrolling: "touch" }}
       >
         {days.map((day, i) => (