From cf83d2fc7c07dc1d909bd1f1e5399ad679a0867b Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Sat, 28 Dec 2024 20:35:13 +0000
Subject: [PATCH] fix: height issues in open image dialog

---
 src/components/dialogs/OpenImage.tsx                | 8 +++-----
 src/components/dialogs/open-image/BlockSelector.tsx | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

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 (
-		<DialogContent ref={divRef}>
+		<DialogContent>
 			<DialogHeader>
 				<DialogTitle>Open Image</DialogTitle>
 				<DialogDescription>Open your image to load as blocks into the canvas</DialogDescription>
@@ -252,7 +250,7 @@ function OpenImage({ close }: DialogProps) {
 
 						<Input placeholder="Search for blocks..." value={searchInput} onChange={(e) => setSearchInput(e.target.value)} />
 
-						<ScrollArea className="h-96">
+						<ScrollArea className="h-60">
 							<BlockSelector
 								stageWidth={stageWidth}
 								searchInput={searchInput}
diff --git a/src/components/dialogs/open-image/BlockSelector.tsx b/src/components/dialogs/open-image/BlockSelector.tsx
index 82a0ea9..5ffec1f 100644
--- a/src/components/dialogs/open-image/BlockSelector.tsx
+++ b/src/components/dialogs/open-image/BlockSelector.tsx
@@ -24,7 +24,7 @@ function BlockSelector({ stageWidth, searchInput, selectedBlocks, setSelectedBlo
 	const [hoverPosition, setHoverPosition] = useState<Position | null>(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 (
 		<Stage
-			width={462}
+			width={stageWidth}
 			height={Math.ceil(Object.keys(blockData).length / blocksPerColumn) * (32 + 2)}
 			options={{ backgroundAlpha: 0 }}
 			onMouseLeave={() => setHoverPosition(null)}