diff --git a/web/gui-v2/package-lock.json b/web/gui-v2/package-lock.json index 2d1f1d9..717674c 100644 --- a/web/gui-v2/package-lock.json +++ b/web/gui-v2/package-lock.json @@ -7629,9 +7629,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001579", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz", - "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==", + "version": "1.0.30001636", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", + "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==", "funding": [ { "type": "opencollective", @@ -29465,9 +29465,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001579", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001579.tgz", - "integrity": "sha512-u5AUVkixruKHJjw/pj9wISlcMpgFWzSrczLZbrqBSxukQixmg0SJ5sZTpvaFvxU0HoQKd4yoyAogyrAz9pzJnA==" + "version": "1.0.30001636", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001636.tgz", + "integrity": "sha512-bMg2vmr8XBsbL6Lr0UHXy/21m84FTxDLWn2FSqMd5PrlbMxwJlQnC2YWYxVgp66PZE+BBNF2jYQUBKCo1FDeZg==" }, "canvas-fit": { "version": "1.5.0", diff --git a/web/gui-v2/src/components/AddRemoveColumnDialog.jsx b/web/gui-v2/src/components/AddRemoveColumnDialog.jsx index 86fc038..a4cbef2 100644 --- a/web/gui-v2/src/components/AddRemoveColumnDialog.jsx +++ b/web/gui-v2/src/components/AddRemoveColumnDialog.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { Fragment, useEffect, useState } from 'react'; import { css } from '@emotion/react'; import { Checkbox, @@ -145,33 +145,35 @@ const AddRemoveColumnDialog = ({
{ - COLUMN_GROUPINGS.map((colGroup) => ( - <> + COLUMN_GROUPINGS.map((colGroup, ix) => ( +

{colGroup.heading}

{colGroup.entries && - colGroup.entries.map((entry) => ( + colGroup.entries.map((entry, ix) => ( )) } {colGroup.subgroups && - colGroup.subgroups.map((subgroup) => ( - <> + colGroup.subgroups.map((subgroup, ix) => ( +

{subgroup.heading}

- {subgroup.entries.map((entry) => ( + {subgroup.entries.map((entry, ix) => ( ))} - +
)) } - +
)) }
diff --git a/web/gui-v2/src/util/useWindowSize.js b/web/gui-v2/src/util/useWindowSize.js index 25f627f..c214efa 100644 --- a/web/gui-v2/src/util/useWindowSize.js +++ b/web/gui-v2/src/util/useWindowSize.js @@ -1,5 +1,7 @@ import { useEffect, useState } from 'react'; +const DEFAULT_WIDTH = 1100; + /** * Return the current width of the browser viewport. * @@ -7,10 +9,16 @@ import { useEffect, useState } from 'react'; * updates as the user resizes the viewport. */ export const useWindowSize = () => { - const [windowSize, setWindowSize] = useState(800); + const [windowSize, setWindowSize] = useState(() => { + if ( typeof window !== "undefined" ) { + return window.innerWidth; + } else { + return DEFAULT_WIDTH; + } + }); useEffect(() => { - const handleResize = () => setWindowSize(window?.innerWidth ?? 800); + const handleResize = () => setWindowSize(window?.innerWidth ?? DEFAULT_WIDTH); if ( typeof window !== "undefined" ) { window.addEventListener("resize", handleResize); }