From 21949abbe1f2d6436e48b2bdeff78df11b119ae1 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Tue, 18 Jan 2022 17:10:21 -0600
Subject: [PATCH] Shorter graph on mobile

---
 web/components/contract-prob-graph.tsx |  5 ++++-
 web/hooks/use-window-size.ts           | 10 +++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/web/components/contract-prob-graph.tsx b/web/components/contract-prob-graph.tsx
index 3be73c6b..94f9646a 100644
--- a/web/components/contract-prob-graph.tsx
+++ b/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' }}
diff --git a/web/hooks/use-window-size.ts b/web/hooks/use-window-size.ts
index 94b3d6ae..6bc750e8 100644
--- a/web/hooks/use-window-size.ts
+++ b/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)
   }, [])