Shorter graph on mobile

web/components/contract-prob-graph.tsx

@@ -47,7 +47,10 @@ export function ContractProbGraph(props: { contract: Contract }) {
   const lessThanAWeek = dayjs(startDate).add(1, 'week').isAfter(latestTime)
 
   return (
-    <div className="w-full" style={{ height: 400 }}>
+    <div
+      className="w-full"
+      style={{ height: !width || width >= 800 ? 400 : 250 }}
+    >
       <ResponsiveLine
         data={data}
         yScale={{ min: 0, max: 100, type: 'linear' }}

web/hooks/use-window-size.ts

@@ -1,17 +1,17 @@
 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 }
-  )
+  const [size, setSize] = useState<{
+    width: number | undefined
+    height: number | undefined
+  }>({ width: undefined, height: undefined })
 
   useEffect(() => {
     const onResize = () => {
       setSize({ width: window.innerWidth, height: window.innerHeight })
     }
 
+    onResize()
     window.addEventListener('resize', onResize)
     return () => window.removeEventListener('resize', onResize)
   }, [])