From 81256d10982b934041fdd392feadbf33d5701e75 Mon Sep 17 00:00:00 2001 From: Meierschlumpf Date: Fri, 6 Jan 2023 23:54:00 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Styling=20variables=20are=20chan?= =?UTF-8?q?ged=20to=20frequently=20sometimes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dashboard/Wrappers/gridstack/use-gridstack.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts index 5f0bcf4c4..1e72380d3 100644 --- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts +++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts @@ -81,12 +81,15 @@ export const useGridstack = ( useEffect(() => { const widgetWidth = mainAreaWidth / wrapperColumnCount; // widget width is used to define sizes of gridstack items within global.scss - // TODO: improve root.style.setProperty('--gridstack-widget-width', widgetWidth.toString()); - root.style.setProperty('--gridstack-column-count', wrapperColumnCount.toString()); gridRef.current?.cellHeight(widgetWidth); }, [mainAreaWidth, wrapperColumnCount]); + useEffect(() => { + // column count is used to define count of columns of gridstack within global.scss + root.style.setProperty('--gridstack-column-count', wrapperColumnCount.toString()); + }, [wrapperColumnCount]); + const onChange = isEditMode ? (changedNode: GridStackNode) => { if (!configName) return;