From 3c437cdb60ed7ad089b383913de017d044465166 Mon Sep 17 00:00:00 2001
From: Leonardo <leomilho@gmail.com>
Date: Fri, 14 Jun 2024 10:45:37 +0200
Subject: [PATCH] fix: stacked resizable not properly resizing
---
.../lib/components/layout/Resizable.tsx | 21 +++++++++++++------
1 file changed, 15 insertions(+), 6 deletions(-)
diff --git a/libs/shared/lib/components/layout/Resizable.tsx b/libs/shared/lib/components/layout/Resizable.tsx
index 061620796..762266c05 100644
--- a/libs/shared/lib/components/layout/Resizable.tsx
+++ b/libs/shared/lib/components/layout/Resizable.tsx
@@ -38,9 +38,14 @@ export const Resizable = ({
useEffect(() => {
const handleResize = () => {
setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+ setTimeout(() => {
+ // Sometimes the window size is not updated immediately to the proper amount, so retry after 100ms
+ // setWindowSize({ width: window.innerWidth, height: window.innerHeight });
+ }, 100);
};
window.addEventListener('resize', handleResize);
+ if (ref.current) new ResizeObserver(handleResize).observe(ref.current);
return () => {
window.removeEventListener('resize', handleResize);
@@ -54,11 +59,15 @@ export const Resizable = ({
if (ref.current) {
const rect = ref.current.getBoundingClientRect();
if (horizontal) {
- setFirstSize((rect.width - divisorSize) * currentProportion);
- setSecondSize((rect.width - divisorSize) * (1 - currentProportion));
+ const newFirstSize = (rect.width - divisorSize) * currentProportion;
+ const newSecondSize = (rect.width - divisorSize) * (1 - currentProportion);
+ setFirstSize(newFirstSize);
+ setSecondSize(newSecondSize);
} else {
- setFirstSize((rect.height - divisorSize) * currentProportion);
- setSecondSize((rect.height - divisorSize) * (1 - currentProportion));
+ const newFirstSize = (rect.height - divisorSize) * currentProportion;
+ const newSecondSize = (rect.height - divisorSize) * (1 - currentProportion);
+ setFirstSize(newFirstSize);
+ setSecondSize(newSecondSize);
}
}
}, [ref.current, windowSize]);
@@ -123,7 +132,7 @@ export const Resizable = ({
{firstSize > 0 && (
<>
<div
- className={'h-full w-full' + (classNameLeft !== undefined ? classNameLeft : '')}
+ className={'h-full w-full flex-grow ' + (classNameLeft !== undefined ? classNameLeft : '')}
style={horizontal ? { maxWidth: firstSize } : { maxHeight: firstSize }}
>
{children2[0]}
@@ -140,7 +149,7 @@ export const Resizable = ({
onTouchCancel={onTouchCancel}
></div>
<div
- className={'h-full w-full' + (classNameRight !== undefined ? classNameRight : '')}
+ className={'h-full w-full flex-grow ' + (classNameRight !== undefined ? classNameRight : '')}
style={horizontal ? { maxWidth: secondSize } : { maxHeight: secondSize }}
>
{children2[1]}
--
GitLab