fix: tick labels respond to width of the graph (#6741)

* fix: tick labels respond to width of the graph

* fix: add description to new useeffect
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

---------
Co-authored-by: Zach Pomerantz <zzmp@uniswap.org>

src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -258,7 +258,24 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
     setDisplayPrice(endingPrice)
   }, [setCrosshair, setDisplayPrice, endingPrice])
 
+  // Resets the crosshair when the time period is changed, to avoid stale UI
+  useEffect(() => {
+    setCrosshair(null)
+  }, [timePeriod])
+
   const [tickFormatter, crosshairDateFormatter, ticks] = tickFormat(timePeriod, locale)
+  //max ticks based on screen size
+  const maxTicks = Math.floor(width / 100)
+  function calculateTicks(ticks: NumberValue[]) {
+    const newTicks = []
+    const tickSpacing = Math.floor(ticks.length / maxTicks)
+    for (let i = 1; i < ticks.length; i += tickSpacing) {
+      newTicks.push(ticks[i])
+    }
+    return newTicks
+  }
+
+  const updatedTicks = maxTicks > 0 ? (ticks.length > maxTicks ? calculateTicks(ticks) : ticks) : []
   const delta = calculateDelta(startingPrice.value, displayPrice.value)
   const formattedDelta = formatDelta(delta)
   const arrow = getDeltaArrow(delta)
@@ -327,7 +344,7 @@ export function PriceChart({ width, height, prices: originalPrices, timePeriod }
                 tickLength={4}
                 hideTicks={true}
                 tickTransform="translate(0 -5)"
-                tickValues={ticks}
+                tickValues={updatedTicks}
                 top={graphHeight - 1}
                 tickLabelProps={() => ({
                   fill: theme.textSecondary,