From 262656a972f54b0d4231abe2bcb0791ad470304c Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 12 Jan 2020 18:36:05 -0800
Subject: [PATCH] resolve resize issues

---
 web-app/src/components/Divider.tsx         |  1 +
 web-app/src/components/Workspace/index.tsx | 30 ++++++++--------------
 web-app/src/services/hooks/resize.ts       | 20 +++++++++++++++
 3 files changed, 31 insertions(+), 20 deletions(-)
 create mode 100644 web-app/src/services/hooks/resize.ts

diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx
index 97d64ea2..2ca12ba1 100644
--- a/web-app/src/components/Divider.tsx
+++ b/web-app/src/components/Divider.tsx
@@ -3,6 +3,7 @@ import { css, jsx } from '@emotion/core'
 
 const styles = {
   divider: {
+    width: '100%',
     backgroundColor: '#e8e8e8',
     height: '0.1rem',
   },
diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx
index de20df2b..07684381 100644
--- a/web-app/src/components/Workspace/index.tsx
+++ b/web-app/src/components/Workspace/index.tsx
@@ -1,32 +1,22 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
+import { useWindowResize } from '../../services/hooks/resize'
 
 interface Props {
   children: React.ReactElement
 }
 
-const resize = () => ({
-  width: window.innerWidth,
-  height: window.innerHeight,
-})
+const styles = {
+  page: {
+    display: 'flex' as 'flex',
+    position: 'relative' as 'relative',
+    margin: 0,
+    backgroundColor: 'white',
+  },
+}
 
 const Workspace = ({ children }: Props) => {
-  const [dimensions, setDimensions] = React.useState(resize())
-
-  // solution for windows getting off size
-  React.useEffect(() => {
-    setDimensions(resize())
-  }, [window.innerHeight, window.innerWidth])
-
-  const styles = {
-    page: {
-      display: 'flex' as 'flex',
-      position: 'relative' as 'relative',
-      margin: 0,
-      backgroundColor: 'white',
-    },
-  }
-
+  const dimensions = useWindowResize()
   return <div css={{ ...styles.page, ...dimensions }}>{children}</div>
 }
 
diff --git a/web-app/src/services/hooks/resize.ts b/web-app/src/services/hooks/resize.ts
new file mode 100644
index 00000000..0d7e30d5
--- /dev/null
+++ b/web-app/src/services/hooks/resize.ts
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+export const useWindowResize = () => {
+  const resize = () => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  })
+
+  const [dimensions, setDimensions] = React.useState(resize())
+
+  // solution for windows getting off size
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions(resize())
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+  return dimensions
+}