fix(suite): Let Sidebar update its height with window change or zoom

trezor · Jul 9, 2024 · 510ba01 · 510ba01
1 parent 4a557b3
commit 510ba01
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 6 deletions.
diff --git a/packages/components/src/components/ResizableBox/ResizableBox.stories.tsx b/packages/components/src/components/ResizableBox/ResizableBox.stories.tsx
@@ -38,13 +38,41 @@ export const ResizableBox: StoryObj<ResizableBoxProps> = {
         height: 100,
         minHeight: 50,
         maxHeight: 300,
+        updateWidthOnWindowResize: false,
+        updateHeightOnWindowResize: false,
     },
     argTypes: {
+        children: {
+            table: {
+                type: {
+                    summary: 'ReactNode',
+                },
+            },
+        },
         directions: {
             control: {
                 type: 'check',
             },
             options: ['top', 'left', 'right', 'bottom'],
         },
+        isLocked: { control: 'boolean' },
+        width: { control: 'number' },
+        minWidth: { control: 'number' },
+        maxWidth: { control: 'number' },
+        height: { control: 'number' },
+        minHeight: { control: 'number' },
+        maxHeight: { control: 'number' },
+        updateWidthOnWindowResize: {
+            control: 'boolean',
+            description:
+                'Maximize the box width to the window width when resizing window or zooming',
+            defaultValue: false,
+        },
+        updateHeightOnWindowResize: {
+            control: 'boolean',
+            description:
+                'Maximize the box height to the window height when resizing window or zooming',
+            defaultValue: false,
+        },
     },
 };
diff --git a/packages/components/src/components/ResizableBox/ResizableBox.tsx b/packages/components/src/components/ResizableBox/ResizableBox.tsx
@@ -16,6 +16,8 @@ export type ResizableBoxProps = {
     height?: number;
     minHeight?: number;
     maxHeight?: number;
+    updateWidthOnWindowResize?: boolean;
+    updateHeightOnWindowResize?: boolean;
     zIndex?: ZIndexValues;
 };
 
@@ -177,6 +179,8 @@ export const ResizableBox = ({
     height,
     minHeight = 0,
     maxHeight,
+    updateWidthOnWindowResize = false,
+    updateHeightOnWindowResize = false,
     zIndex = zIndices.draggableComponent,
 }: ResizableBoxProps) => {
     const resizableBoxRef = useRef<HTMLDivElement>(null);
@@ -188,7 +192,6 @@ export const ResizableBox = ({
     const [isResizing, setIsResizing] = useState<boolean>(false);
     const [isHovering, setIsHovering] = useState<boolean>(false);
     const [direction, setDirection] = useState<Direction | null>(null);
-    const [isMaxHeight, setIsMaxHeight] = useState<boolean>(false);
 
     const resizeCooldown = createCooldown(150);
 
@@ -261,8 +264,6 @@ export const ResizableBox = ({
             if (newHeight === 0) {
                 setNewHeight(rect.height);
             }
-
-            setIsMaxHeight(Math.floor(rect.height) === window.innerHeight);
         }
 
         document.onmousemove = event => {
@@ -274,20 +275,28 @@ export const ResizableBox = ({
         document.onmouseup = () => setIsResizing(false);
 
         window.onresize = () => {
-            if (isMaxHeight && resizeCooldown() === true) {
-                setNewHeight(maxHeight || window.innerHeight);
+            if (resizeCooldown() === true) {
+                if (updateHeightOnWindowResize) {
+                    setNewHeight(getMaxResult(maxHeight, window.innerHeight));
+                }
+                if (updateWidthOnWindowResize) {
+                    setNewWidth(getMaxResult(maxWidth, window.innerWidth));
+                }
             }
         };
     }, [
         direction,
-        isMaxHeight,
+        directions,
         isResizing,
         maxHeight,
+        maxWidth,
         newHeight,
         newWidth,
         resizableBoxRef,
         resize,
         resizeCooldown,
+        updateHeightOnWindowResize,
+        updateWidthOnWindowResize,
     ]);
 
     const handleMouseOverDirection = (direction: Direction) => {

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/Sidebar.tsx
@@ -32,6 +32,7 @@ export const Sidebar = () => {
                 minWidth={230}
                 maxWidth={400}
                 zIndex={zIndices.draggableComponent}
+                updateHeightOnWindowResize
             >
                 <Container $elevation={elevation}>
                     <ElevationUp>