diff --git a/src/components/dialogs/OpenImage.tsx b/src/components/dialogs/OpenImage.tsx index d810484..df2a56a 100644 --- a/src/components/dialogs/OpenImage.tsx +++ b/src/components/dialogs/OpenImage.tsx @@ -116,12 +116,10 @@ function OpenImage({ close }: DialogProps) { useEffect(() => { if (!divRef.current) return; setStageWidth(divRef.current.clientWidth); - - console.log(stageWidth); - }, []); + }, [divRef.current?.clientWidth]); return ( - + Open Image Open your image to load as blocks into the canvas @@ -252,7 +250,7 @@ function OpenImage({ close }: DialogProps) { setSearchInput(e.target.value)} /> - + (null); const filteredBlocks = useMemo(() => Object.keys(blockData).filter((value) => value.includes(searchInput)), [searchInput, blockData]); - const blocksPerColumn = Math.floor(462 / (32 + 2)); + const blocksPerColumn = Math.floor(stageWidth / (32 + 2)); const onClick = (block: string) => { if (selectedBlocks.includes(block)) { @@ -36,7 +36,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo return ( setHoverPosition(null)}