Merge pull request #97 from njxue/fix-resize-observer

Fix resize observer error

Author: njxue

frontend/src/presentation/pages/CollaborationRoomPage.module.css

@@ -1,5 +1,5 @@
 .container {
-    height: 100vh;
+    height: 100%;
     width: 100%;
     overflow-x: hidden;
     display: flex;
@@ -19,36 +19,21 @@
     min-height: 0;
 }
 
-.questionContent {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-}
-
-.contentArea {
-    position: relative;
-    flex: 1;
+.outputContainer {
+    flex-shrink: 0;
+    overflow-y: auto;
 }
 
-.questionDetail,
-.chatFrame {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
+.leftContainer {
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
     height: 100%;
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-}
-
-.hidden {
-    opacity: 0;
-    visibility: hidden;
+    overflow-y: auto;
 }
 
-.visible {
-    opacity: 1;
-    visibility: visible;
+.questionAndChatContainer {
+    flex: 1;
 }
 
 .verticalSeparator,
@@ -71,8 +56,3 @@
     cursor: row-resize;
     height: 6px;
 }
-
-.outputContainer {
-    flex-shrink: 0;
-    overflow-y: auto;
-}

frontend/src/presentation/pages/CollaborationRoomPage.tsx

@@ -28,18 +28,9 @@ const CollaborationRoomPage: React.FC = () => {
     const [showChat, setShowChat] = useState(false);
     const [loading, setLoading] = useState<boolean>(true);
     const [error, setError] = useState<string | null>(null);
-    const resizeTimeoutRef = useRef<NodeJS.Timeout>();
 
     // Extract details from location.state if available
     const { roomId, attemptStartedAt, matchUserId, questionId } = locationState || {};
-    const handleResize = useCallback(() => {
-        if (resizeTimeoutRef.current) {
-            clearTimeout(resizeTimeoutRef.current);
-        }
-        resizeTimeoutRef.current = setTimeout(() => {
-            console.log("Resizing...");
-        }, 100);
-    }, []);
 
     useEffect(() => {
         const populateRoom = async () => {
@@ -98,33 +89,19 @@ const CollaborationRoomPage: React.FC = () => {
         fetchQuestion();
     }, [room]);
 
-    useEffect(() => {
-        const resizeObserver = new ResizeObserver((entries) => {
-            if (entries[0]) handleResize();
-        });
-
-        const container = document.querySelector(`.${styles.container}`);
-        if (container) resizeObserver.observe(container);
-
-        return () => {
-            resizeObserver.disconnect();
-            if (resizeTimeoutRef.current) clearTimeout(resizeTimeoutRef.current);
-        };
-    }, [handleResize]);
-
     // Resizable Layout Configurations
     const { position: questionPosition, separatorProps: verticalSeparatorProps } = useResizable({
         axis: "x",
         min: 300,
-        initial: window.innerWidth * 0.3,
-        max: window.innerWidth * 0.6
+        initial: window.innerWidth * 0.4,
+        max: 800
     });
 
     const { position: outputPosition, separatorProps: horizontalSeparatorProps } = useResizable({
         axis: "y",
         min: 60,
-        initial: window.innerHeight * 0.2,
-        max: window.innerHeight * 0.6,
+        initial: 60,
+        max: 500,
         reverse: true
     });
 
@@ -145,17 +122,10 @@ const CollaborationRoomPage: React.FC = () => {
         <>
             {room && question ? (
                 <div className={styles.container}>
-                    <div className={styles.questionContainer} style={{ width: questionPosition }}>
-                        <div className={styles.questionContent}>
-                            <ToggleButton showChat={showChat} onClick={() => setShowChat(!showChat)} />
-                            <div className={styles.contentArea}>
-                                <div className={`${styles.questionDetail} ${showChat ? styles.hidden : ""}`}>
-                                    <QuestionDetail question={question} />
-                                </div>
-                                <div className={`${styles.chatFrame} ${showChat ? styles.visible : styles.hidden}`}>
-                                    <ChatFrame roomId={room.roomId} />
-                                </div>
-                            </div>
+                    <div className={styles.leftContainer} style={{ width: questionPosition }}>
+                        <ToggleButton showChat={showChat} onClick={() => setShowChat((showChat) => !showChat)} />
+                        <div className={styles.questionAndChatContainer}>
+                            {showChat ? <ChatFrame roomId={roomId} /> : <QuestionDetail question={question} />}
                         </div>
                     </div>