fix expandable view

ui/component/common/tabs.jsx

@@ -8,7 +8,7 @@ import {
   TabPanel as ReachTabPanel,
 } from '@reach/tabs';
 import classnames from 'classnames';
-import { useOnResize } from '../../effects/use-on-resize';
+import { useOnResize } from 'effects/use-on-resize';
 
 // Tabs are a compound component
 // The components are used individually, but they will still interact and share state

ui/component/expandable/view.jsx

@@ -2,7 +2,7 @@
 import React, { useRef, useState } from 'react';
 import classnames from 'classnames';
 import Button from 'component/button';
-import { useRect } from '@reach/rect';
+import { useOnResize } from 'effects/use-on-resize';
 
 const COLLAPSED_HEIGHT = 120;
 
@@ -12,9 +12,27 @@ type Props = {
 
 export default function Expandable(props: Props) {
   const [expanded, setExpanded] = useState(false);
+  const [rect, setRect] = useState();
   const { children } = props;
   const ref = useRef();
-  const rect = useRect(ref);
+
+  // Update the rect initially & when the window size changes.
+  useOnResize(() => {
+    if (ref.current) {
+      setRect(ref.current.getBoundingClientRect());
+    }
+  });
+
+  // Update the rect when children changes,
+  // not sure if this is needed but a situation could arise when the
+  // component re-renders with a different children prop,
+  // Can enable on a later date if needed.
+  // useLayoutEffect(() => {
+  //   console.log('render, useLayoutEffect');
+  //   if (ref.current) {
+  //     setRect(ref.current.getBoundingClientRect());
+  //   }
+  // }, [children]);
 
   function handleClick() {
     setExpanded(!expanded);