refactor: code cleanup

Author: yordan-st

packages/pluggableWidgets/gallery-web/CHANGELOG.md

@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
-- We fixed an issue where the configured column count wouldn't show up in the preview of the widget
+- We fixed an issue where the column count was not reflected properly in the preview mode.
 
 ### Added
 

packages/pluggableWidgets/gallery-web/src/features/useGridPositionsPreview.ts

@@ -12,7 +12,7 @@ type GridPositionReturn = {
     numberOfItems: number;
 };
 
-function useNumberOfRows(): [React.RefObject<HTMLDivElement>, number] {
+function useObservedColumns(): [React.RefObject<HTMLDivElement>, number] {
     const containerRef = useRef<HTMLDivElement>(null);
     const [numberOfColumns, setNumberOfColumns] = useState(12);
 
@@ -31,8 +31,6 @@ function useNumberOfRows(): [React.RefObject<HTMLDivElement>, number] {
 
         resizeObserver.observe(containerRef.current);
 
-        setNumberOfColumns(containerRef.current.offsetWidth);
-
         return () => resizeObserver.disconnect();
     }, []);
 
@@ -42,7 +40,7 @@ function useNumberOfRows(): [React.RefObject<HTMLDivElement>, number] {
 export function useGridPositionsPreview(
     config: GridPositionsProps
 ): GridPositionReturn & { containerRef: React.RefObject<HTMLDivElement> } {
-    const [containerRef, numberOfColumns] = useNumberOfRows();
+    const [containerRef, numberOfColumns] = useObservedColumns();
     const maxItems = numberOfColumns * 3;
     const numberOfItems = Math.min(maxItems, config.totalItems);
     const numberOfRows = Math.ceil(numberOfItems / numberOfColumns);