Show fewer graph ticks on mobile so they don't overlap. padding

web/components/analytics/charts.tsx

@@ -21,9 +21,11 @@ export function DailyCountChart(props: {
   }))
   const data = [{ id: 'Count', data: points, color: '#11b981' }]
 
+  const bottomAxisTicks = width && width < 600 ? 6 : undefined
+
   return (
     <div
-      className="w-full"
+      className="w-full overflow-hidden"
       style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
     >
       <ResponsiveLine
@@ -33,6 +35,7 @@ export function DailyCountChart(props: {
           type: 'time',
         }}
         axisBottom={{
+          tickValues: bottomAxisTicks,
           format: (date) => dayjs(date).format('MMM DD'),
         }}
         colors={{ datum: 'color' }}
@@ -66,9 +69,11 @@ export function DailyPercentChart(props: {
   }))
   const data = [{ id: 'Percent', data: points, color: '#11b981' }]
 
+  const bottomAxisTicks = width && width < 600 ? 6 : undefined
+
   return (
     <div
-      className="w-full"
+      className="w-full overflow-hidden"
       style={{ height: !small && (!width || width >= 800) ? 400 : 250 }}
     >
       <ResponsiveLine
@@ -81,6 +86,7 @@ export function DailyPercentChart(props: {
           format: (value) => `${value}%`,
         }}
         axisBottom={{
+          tickValues: bottomAxisTicks,
           format: (date) => dayjs(date).format('MMM DD'),
         }}
         colors={{ datum: 'color' }}

web/pages/analytics.tsx

@@ -153,7 +153,7 @@ export function CustomAnalytics(props: {
     weekOnWeekRetention,
   } = props
   return (
-    <Col>
+    <Col className="px-2 sm:px-0">
       <Title text="Active users" />
       <p className="text-gray-500">
         An active user is a user who has traded in, commented on, or created a