Extract SizedContainer helper component

web/components/contract/contract-overview.tsx

@@ -1,5 +1,3 @@
-import React, { useEffect, useRef, useState } from 'react'
-
 import { tradingAllowed } from 'web/lib/firebase/contracts'
 import { Col } from '../layout/col'
 import { ContractChart } from 'web/components/charts/contract'
@@ -24,6 +22,7 @@ import {
   BinaryContract,
 } from 'common/contract'
 import { ContractDetails } from './contract-details'
+import { SizedContainer } from 'web/components/sized-container'
 
 const OverviewQuestion = (props: { text: string }) => (
   <Linkify className="text-lg text-indigo-700 sm:text-2xl" text={props.text} />
@@ -49,32 +48,18 @@ const SizedContractChart = (props: {
   fullHeight: number
   mobileHeight: number
 }) => {
-  const { contract, bets, fullHeight, mobileHeight } = props
+  const { fullHeight, mobileHeight, contract, bets } = props
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [chartWidth, setChartWidth] = useState<number>()
-  const [chartHeight, setChartHeight] = useState<number>()
-  useEffect(() => {
-    const handleResize = () => {
-      setChartHeight(window.innerWidth < 800 ? mobileHeight : fullHeight)
-      setChartWidth(containerRef.current?.clientWidth)
-    }
-    handleResize()
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [fullHeight, mobileHeight])
   return (
-    <div ref={containerRef}>
+    <SizedContainer fullHeight={fullHeight} mobileHeight={mobileHeight}>
-      {chartWidth != null && chartHeight != null && (
+      {(width, height) => (
         <ContractChart
+          width={width}
+          height={height}
           contract={contract}
           bets={bets}
-          width={chartWidth}
-          height={chartHeight}
         />
       )}
-    </div>
+    </SizedContainer>
   )
 }
 
@@ -114,7 +99,11 @@ const BinaryOverview = (props: { contract: BinaryContract; bets: Bet[] }) => {
         <ContractDetails contract={contract} />
         <Row className="justify-between gap-4">
           <OverviewQuestion text={contract.question} />
-          <BinaryResolutionOrChance contract={contract} large />
+          <BinaryResolutionOrChance
+            className="flex items-end"
+            contract={contract}
+            large
+          />
         </Row>
       </Col>
       <SizedContractChart

web/components/sized-container.tsx

@@ -0,0 +1,35 @@
+import { ReactNode, useEffect, useRef, useState } from 'react'
+
+export const SizedContainer = (props: {
+  fullHeight: number
+  mobileHeight: number
+  mobileThreshold?: number
+  children: (width: number, height: number) => ReactNode
+}) => {
+  const { children, fullHeight, mobileHeight } = props
+  const threshold = props.mobileThreshold ?? 800
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [width, setWidth] = useState<number>()
+  const [height, setHeight] = useState<number>()
+  useEffect(() => {
+    if (containerRef.current) {
+      const handleResize = () => {
+        setHeight(window.innerWidth <= threshold ? mobileHeight : fullHeight)
+        setWidth(containerRef.current?.clientWidth)
+      }
+      handleResize()
+      const resizeObserver = new ResizeObserver(handleResize)
+      resizeObserver.observe(containerRef.current)
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+        resizeObserver.disconnect()
+      }
+    }
+  }, [threshold, fullHeight, mobileHeight])
+  return (
+    <div ref={containerRef}>
+      {width != null && height != null && children(width, height)}
+    </div>
+  )
+}