feat: dynamic set grid dimensions

Author: KatoakDR

electron/renderer/components/grid/grid.tsx

@@ -239,9 +239,12 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
       width={gridMaxWidth}
       rowHeight={gridRowHeight}
       maxRows={gridMaxRows}
-      // Disable the grid from managing its own height.
-      // We manage it explicitly in the `gridLayoutStyles` above.
-      autoSize={false}
+      // Enable the grid to grow and shrink to stay within
+      // the max columns and rows. Note, the items within the
+      // grid might not shrink to fit the grid, but the canvas will.
+      // The grid then becomes scrollable and ensures elements outside the
+      // grid position on page correctly rather than floating over the grid.
+      autoSize={true}
       // Provide nominal spacing between grid items.
       // If this value changes then review the grid row height variables.
       margin={[1, 1]}

electron/renderer/hooks/measure.tsx

@@ -0,0 +1,78 @@
+// Inspired by `useMeasure` by @streamich/react-use.
+// https://github.com/streamich/react-use/blob/master/src/useMeasure.ts
+// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+
+import { debounce } from 'lodash';
+import { useEffect, useMemo, useState } from 'react';
+
+export interface UseMeasureProps {
+  /**
+   * The number of milliseconds to wait before updating the measured size.
+   * When the user is actively resizing the window, the 'resize' event
+   * fires rapidly. For performance, debounce so we react more efficiently.
+   *
+   * Default is 100.
+   */
+  delay?: number;
+}
+
+export type UseMeasureRef<E extends Element = Element> = (element: E) => void;
+
+export type UseMeasureResult<E extends Element = Element> = [
+  UseMeasureRef<E>,
+  ElementSize,
+];
+
+export interface ElementSize {
+  height: number;
+  width: number;
+}
+
+const defaultSize: ElementSize = {
+  height: 0,
+  width: 0,
+};
+
+/**
+ * Usage:
+ * ```
+ * const [ref, { height, width }] = useMeasure();
+ * ...
+ * <div ref={ref}></div>
+ * ```
+ */
+export function useMeasure<E extends Element = Element>(
+  props?: UseMeasureProps
+): UseMeasureResult<E> {
+  const { delay = 100 } = props ?? {};
+
+  const [element, ref] = useState<E | null>(null);
+  const [size, setSize] = useState<ElementSize>(defaultSize);
+
+  const observer = useMemo(() => {
+    const onResize = debounce<ResizeObserverCallback>((entries) => {
+      // We are observing at most one element,
+      // but the API supports observing multiple elements.
+      // Grab the first one.
+      if (entries[0]) {
+        const height = entries[0].contentRect.height;
+        const width = entries[0].contentRect.width;
+        setSize({ height, width });
+      }
+    }, delay);
+
+    return new ResizeObserver(onResize);
+  }, [delay]);
+
+  useEffect(() => {
+    if (!element) {
+      return;
+    }
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [observer, element]);
+
+  return [ref, size];
+}

electron/renderer/hooks/window-dimensions.tsx

@@ -0,0 +1,57 @@
+// Inspired by stackoverflow solution.
+// https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+
+import { debounce } from 'lodash';
+import { useEffect, useState } from 'react';
+
+export interface UseWindowSizeProps {
+  /**
+   * The number of milliseconds to wait before updating the window size.
+   * When the user is actively resizing the window, the 'resize' event
+   * fires rapidly. For performance, debounce so we react more efficiently.
+   *
+   * Default is 100.
+   */
+  delay?: number;
+}
+
+export interface WindowSize {
+  height: number;
+  width: number;
+}
+
+const defaultSize: WindowSize = {
+  height: 0,
+  width: 0,
+};
+
+/**
+ * Usage:
+ * ```
+ * const { height, width } = useWindowSize();
+ * ```
+ */
+export function useWindowSize(props?: UseWindowSizeProps): WindowSize {
+  const { delay = 100 } = props ?? {};
+
+  const [size, setSize] = useState<WindowSize>(defaultSize);
+
+  useEffect(() => {
+    const onWindowResize = debounce(() => {
+      setSize({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      });
+    }, delay);
+
+    onWindowResize(); // capture initial size
+
+    window.addEventListener('resize', onWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', onWindowResize);
+    };
+  }, [delay]);
+
+  return size;
+}