reset preview position on resize

src/ui_kit/QuizPreview/QuizPreview.tsx

@@ -1,16 +1,21 @@
 import { PointsIcon } from "@icons/questionsPage/PointsIcon";
+import VisibilityIcon from '@mui/icons-material/Visibility';
 import { Box, IconButton } from "@mui/material";
 import { toggleQuizPreview, useQuizPreviewStore } from "@root/quizPreview";
 import { useLayoutEffect, useRef } from "react";
 import { Rnd } from "react-rnd";
+import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import QuizPreviewLayout from "./QuizPreviewLayout";
 import ResizeIcon from "./ResizeIcon";
-import VisibilityIcon from '@mui/icons-material/Visibility';
 
 
 const DRAG_PARENT_MARGIN = 25;
 const NAVBAR_HEIGHT = 81;
 const DRAG_PARENT_BOTTOM_MARGIN = 65;
+const PREVIEW_MIN_WIDTH = 340;
+const PREVIEW_MIN_HEIGHT = 300;
+const PREVIEW_DEFAULT_WIDTH = "340";
+const PREVIEW_DEFAULT_HEIGHT = "480";
 
 interface RndPositionAndSize {
     x: number;
@@ -23,13 +28,19 @@ export default function QuizPreview() {
     const isPreviewShown = useQuizPreviewStore(state => state.isPreviewShown);
     const rndParentRef = useRef<HTMLDivElement>(null);
     const rndRef = useRef<Rnd | null>(null);
-    const rndPositionAndSizeRef = useRef<RndPositionAndSize>({ x: 0, y: 0, width: "340", height: "480" });
+    const rndPositionAndSizeRef = useRef<RndPositionAndSize>({
+        x: 0,
+        y: 0,
+        width: PREVIEW_DEFAULT_WIDTH,
+        height: PREVIEW_DEFAULT_HEIGHT
+    });
     const isFirstShowRef = useRef<boolean>(true);
+    const windowSize = useWindowSize();
 
-    useLayoutEffect(function stickPreviewToBottomRight() {
+    function resetPreviewPositionAndSize() {
         const rnd = rndRef.current;
         const rndSelfElement = rnd?.getSelfElement();
-        if (!rnd || !rndSelfElement || !rndParentRef.current || !isFirstShowRef.current) return;
+        if (!rnd || !rndSelfElement || !rndParentRef.current) return;
 
         const rndParentRect = rndParentRef.current.getBoundingClientRect();
         const rndRect = rndSelfElement.getBoundingClientRect();
@@ -38,12 +49,25 @@ export default function QuizPreview() {
         const y = rndParentRect.height - rndRect.height;
 
         rnd.updatePosition({ x, y });
+        rnd.updateSize({ width: PREVIEW_DEFAULT_WIDTH, height: PREVIEW_DEFAULT_HEIGHT });
         rndPositionAndSizeRef.current.x = x;
         rndPositionAndSizeRef.current.y = y;
+        rndPositionAndSizeRef.current.width = PREVIEW_DEFAULT_WIDTH.toString();
+        rndPositionAndSizeRef.current.height = PREVIEW_DEFAULT_HEIGHT.toString();
+    }
+
+    useLayoutEffect(() => {
+        if (!isFirstShowRef.current) return;
+
+        resetPreviewPositionAndSize();
 
         isFirstShowRef.current = false;
     }, [isPreviewShown]);
 
+    useLayoutEffect(() => {
+        resetPreviewPositionAndSize();
+    }, [windowSize.height, windowSize.width]);
+
     return (
         <Box
             ref={rndParentRef}
@@ -61,8 +85,8 @@ export default function QuizPreview() {
         >
             {isPreviewShown &&
                 <Rnd
-                    minHeight={300}
-                    minWidth={340}
+                    minHeight={PREVIEW_MIN_HEIGHT}
+                    minWidth={PREVIEW_MIN_WIDTH}
                     bounds="parent"
                     ref={rndRef}
                     dragHandleClassName="quiz-preview-draghandle"

src/utils/hooks/useWindowSize.ts

@@ -0,0 +1,35 @@
+import { useEffect, useLayoutEffect, useState } from "react";
+
+
+interface WindowSize {
+    width: number;
+    height: number;
+}
+
+export function useWindowSize(): WindowSize {
+    const [windowSize, setWindowSize] = useState<WindowSize>({
+        width: 0,
+        height: 0,
+    });
+
+    const handleSize = () => {
+        setWindowSize({
+            width: window.innerWidth,
+            height: window.innerHeight,
+        });
+    };
+
+    useEffect(() => {
+        window.addEventListener("resize", handleSize);
+
+        return () => {
+            window.removeEventListener("resize", handleSize);
+        };
+    });
+
+    useLayoutEffect(() => {
+        handleSize();
+    }, []);
+
+    return windowSize;
+}