Fix graph's overlapping ticks on mobile

web/components/contract-overview.tsx

@@ -39,7 +39,7 @@ export const ContractOverview = (props: {
           </Row>
         </Col>
 
-        <Col className="text-4xl mt-4 md:mt-2 md:mx-4 text-primary items-end self-center md:self-start">
+        <Col className="text-4xl mt-4 md:mt-2 md:ml-4 md:mr-6 text-primary items-end self-center md:self-start">
           {probPercent}
           <div className="text-xl">chance</div>
         </Col>

web/components/contract-prob-graph.tsx

@@ -2,6 +2,7 @@ import { DatumValue } from '@nivo/core'
 import { ResponsiveLine } from '@nivo/line'
 import dayjs from 'dayjs'
 import { useBets } from '../hooks/use-bets'
+import { useWindowSize } from '../hooks/use-window-size'
 import { Contract } from '../lib/firebase/contracts'
 
 export function ContractProbGraph(props: { contract: Contract }) {
@@ -28,6 +29,8 @@ export function ContractProbGraph(props: { contract: Contract }) {
 
   const tickValues = [0, 25, 50, 75, 100]
 
+  const { width } = useWindowSize()
+
   return (
     <div className="w-full" style={{ height: 400 }}>
       <ResponsiveLine
@@ -42,6 +45,7 @@ export function ContractProbGraph(props: { contract: Contract }) {
         xScale={{ type: 'time' }}
         xFormat={(d) => formatTime(+d.valueOf(), lessThanAWeek)}
         axisBottom={{
+          tickValues: !width || width < 800 ? 4 : 8,
           format: (time) => formatTime(+time, lessThanAWeek),
         }}
         colors={{ datum: 'color' }}
@@ -49,8 +53,9 @@ export function ContractProbGraph(props: { contract: Contract }) {
         pointBorderWidth={1}
         pointBorderColor="#fff"
         enableSlices="x"
+        enableGridX={!!width && width >= 800}
         enableArea
-        margin={{ top: 20, right: 22, bottom: 22, left: 40 }}
+        margin={{ top: 20, right: 28, bottom: 22, left: 40 }}
       />
     </div>
   )

web/hooks/use-window-size.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+export const useWindowSize = () => {
+  const [size, setSize] = useState(
+    typeof window === 'undefined'
+      ? { width: undefined, height: undefined }
+      : { width: window.innerWidth, height: window.innerHeight }
+  )
+
+  useEffect(() => {
+    const onResize = () => {
+      setSize({ width: window.innerWidth, height: window.innerHeight })
+    }
+
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [])
+
+  return size
+}

web/pages/contract/[contractId].tsx

@@ -32,7 +32,7 @@ export default function ContractPage() {
     <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
       <Header />
 
-      <Col className="w-full md:justify-between md:flex-row mt-4">
+      <Col className="w-full items-start md:justify-between md:flex-row mt-4">
         <ContractOverview
           contract={contract}
           className="max-w-4xl w-full p-4"
@@ -41,15 +41,11 @@ export default function ContractPage() {
         <div className="mt-12 md:mt-0 md:ml-8" />
 
         {isResolved ? (
-          <ResolvedPanel className="self-start" contract={contract} />
+          <ResolvedPanel contract={contract} />
         ) : isCreator ? (
-          <ResolutionPanel
-            className="self-start"
-            creator={user}
-            contract={contract}
-          />
+          <ResolutionPanel creator={user} contract={contract} />
         ) : (
-          <BetPanel className="self-start" contract={contract} />
+          <BetPanel contract={contract} />
         )}
       </Col>
     </div>