Resizing panels & some small fixes

Author: Amirelkanov

package.json

@@ -28,6 +28,7 @@
         "react-markdown": "^10.1.0",
         "react-redux": "^9.2.0",
         "react-router-dom": "^7.9.6",
+        "react-split": "^2.0.14",
         "react-timer-hook": "^4.0.5",
         "redux": "^5.0.1",
         "redux-persist": "^6.0.0",

pnpm-lock.yaml

@@ -7,3 +7,24 @@
     background: var(--background);
     color: var(--text-primary);
 }
+
+// Gutter for resizing panels
+.gutter {
+    width: 1em;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    cursor: col-resize;
+
+    &::before {
+        content: "\22EE"; // Three vertical dots
+
+        font-size: 1.25em;
+        font-weight: 700;
+
+        pointer-events: none;
+        color: var(--card-secondary);
+    }
+}

src/app/styles/index.scss

@@ -1,6 +1,10 @@
 .duelPage {
     display: flex;
     padding: 1em;
-    gap: 1em;
-    overflow: auto;
+    overflow: hidden;
+}
+
+.split {
+    display: flex;
+    flex: 1;
 }

src/pages/duel/ui/DuelPage/DuelPage.module.scss

@@ -1,12 +1,15 @@
+import Split from "react-split";
 import { CodePanel } from "widgets/code-panel";
 import { TaskPanel } from "widgets/task-panel";
 import styles from "./DuelPage.module.scss";
 
 const DuelPage = () => {
     return (
         <div className={styles.duelPage}>
-            <CodePanel />
-            <TaskPanel />
+            <Split direction="horizontal" sizes={[50, 50]} minSize={300} className={styles.split}>
+                <CodePanel />
+                <TaskPanel />
+            </Split>
         </div>
     );
 };

src/pages/duel/ui/DuelPage/DuelPage.tsx

@@ -64,6 +64,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
 
     svg {
         width: 1.25em;

src/shared/ui/Button/Button.module.scss

@@ -1,7 +1,6 @@
 .tabbedCard {
     display: flex;
     flex-direction: column;
-    width: 50%;
 
     background-color: var(--card-primary);
     border-radius: 0.5em;

src/shared/ui/TabbedCard/TabbedCard.module.scss

@@ -1,5 +1,4 @@
 .codePanelContent {
-    flex: 1;
     height: 100%;
     overflow: hidden;
 }

src/widgets/code-panel/ui/CodePanel/CodePanel.module.scss

@@ -1,6 +1,4 @@
 .taskPanelContent {
-    flex: 1;
-
     border-radius: 0 0 0.5em 0.5em;
 
     overflow-y: auto;

src/widgets/task-panel/ui/TaskPanel/TaskPanel.module.scss

@@ -25,8 +25,12 @@ export const TaskSubmissionsContent = () => {
     });
 
     useEffect(() => {
-        setShouldPollSubmissions(!submissions?.every((s) => s.status === "Done"));
-    }, [submissions]);
+        if (submissions?.every((s) => s.status === "Done") || isError) {
+            setShouldPollSubmissions(false);
+        } else {
+            setShouldPollSubmissions(true);
+        }
+    }, [submissions, isError]);
 
     if (isSubmissionsLoading || isDuelLoading) {
         return <Loader />;