Merge pull request #411 from bruin-tennis-consulting/sticky-carousel

made date header carousel sticky

Author: kesdlvi

app/components/Dashboard.js

@@ -465,31 +465,33 @@ const Dashboard = () => {
         onSeasonChange={handleSeasonChange}
       />
 
-      <div className={styles.carousel}>
-        {!seasonFilteredMatches.length
-          ? Array(10)
-              .fill(0)
-              .map((_, i) => (
-                <div
-                  key={i}
-                  className={`${styles.card} ${styles.placeholderCard}`}
-                />
-              ))
-          : uniqueMatches.map((match) => {
-              const matchKey = match.matchDetails.duel
-                ? `${match.matchDate}#${match.teams.opponentTeam}`
-                : `_#${match.matchDetails.event}`
-
-              return (
-                <CarouselItem
-                  key={matchKey}
-                  match={match}
-                  logo={logos[match.teams.opponentTeam]}
-                  isSelected={selectedMatchSets.includes(matchKey)}
-                  onClick={handleCarouselClick}
-                />
-              )
-            })}
+      <div className={styles.carouselStickyShell}>
+        <div className={styles.carousel}>
+          {!seasonFilteredMatches.length
+            ? Array(10)
+                .fill(0)
+                .map((_, i) => (
+                  <div
+                    key={i}
+                    className={`${styles.card} ${styles.placeholderCard}`}
+                  />
+                ))
+            : uniqueMatches.map((match) => {
+                const matchKey = match.matchDetails.duel
+                  ? `${match.matchDate}#${match.teams.opponentTeam}`
+                  : `_#${match.matchDetails.event}`
+
+                return (
+                  <CarouselItem
+                    key={matchKey}
+                    match={match}
+                    logo={logos[match.teams.opponentTeam]}
+                    isSelected={selectedMatchSets.includes(matchKey)}
+                    onClick={handleCarouselClick}
+                  />
+                )
+              })}
+        </div>
       </div>
 
       <div className={styles.mainContent}>

app/components/DashboardTile.js

@@ -108,7 +108,7 @@ const DashboardTile = ({
                 fontSize: '0.6em',
                 top: '-0.3em',
                 left: '0.9em',
-                letterSpacing: 'normal'
+                letterSpacing: '0.05em'
               }}
             >
               {tieScores[index]}

app/components/MatchTiles.js

@@ -47,6 +47,12 @@ const MatchTiles = ({
 
   // Render function for scores
   const renderScore = (score, index, isPlayer1, tieScores) => {
+    console.log('Rendering score:', {
+      score,
+      index,
+      isPlayer1,
+      tieScores
+    })
     const lastSetIndex =
       player1FinalScores[2].score == null ? 1 : player1FinalScores.length - 1
     const isLastSet = index === lastSetIndex
@@ -78,7 +84,7 @@ const MatchTiles = ({
                 fontSize: '0.6em',
                 top: '-0.3em',
                 left: '0.9em',
-                letterSpacing: 'normal'
+                letterSpacing: '0.05em'
               }}
             >
               {tieScores[index]}

app/styles/Dashboard.module.css

@@ -12,7 +12,7 @@
   padding-left: 40px;
   padding-right: 40px;
   font-family: 'DM Sans', sans-serif;
-  overflow-x: hidden;
+  overflow-x: clip;
 }
 
 .header {
@@ -124,11 +124,18 @@
 
 /* Carousel of cards (match filtering) */
 
+.carouselStickyShell {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background-color: #ffffff;
+  margin-bottom: 30px;
+}
+
 .carousel {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
-  margin-bottom: 30px;
   padding: 10px 0;
   border-top: 1px solid #dedede;
   border-bottom: 1px solid #dedede;
@@ -367,7 +374,7 @@
     justify-content: flex-start;
   }
 
-  .carousel {
+  .carouselStickyShell {
     margin-bottom: 17px;
   }
 }