fix: ensure vertical split section resizes correctly (#157)

src/components/workspace/WorkSpace/WorkSpace.module.scss

@@ -6,7 +6,7 @@
     flex: 0 0 70px;
     width: 70px;
   }
-  .splitHorizontal {
+  .splitVertical {
     display: flex;
     flex-direction: row;
     width: calc(100% - 70px);
@@ -16,7 +16,7 @@
       background-color: var(--splitter-bg);
     }
   }
-  .splitVertical {
+  .splitHorizontal {
     display: flex;
     flex-direction: column;
     height: 100%;

src/components/workspace/WorkSpace/WorkSpace.tsx

@@ -16,7 +16,7 @@ import * as TonCrypto from '@ton/crypto';
 import { Blockchain } from '@ton/sandbox';
 import { Buffer } from 'buffer';
 import { useRouter } from 'next/router';
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useMemo, useRef, useState } from 'react';
 import Split from 'react-split';
 import { useEffectOnce } from 'react-use';
 import BottomPanel from '../BottomPanel/BottomPanel';
@@ -32,6 +32,8 @@ import FileTree from '../tree/FileTree';
 import ItemAction from '../tree/FileTree/ItemActions';
 import s from './WorkSpace.module.scss';
 
+type SplitInstance = Split & { split: Split.Instance };
+
 const WorkSpace: FC = () => {
   const { clearLog, createLog } = useLogActivity();
 
@@ -40,6 +42,7 @@ const WorkSpace: FC = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [contract, setContract] = useState<any>('');
+  const splitVerticalRef = useRef<SplitInstance | null>(null);
 
   const { tab } = router.query;
   const {
@@ -153,6 +156,17 @@ const WorkSpace: FC = () => {
     window.TonCore = TonCore;
     window.TonCrypto = TonCrypto;
     window.Buffer = Buffer;
+
+    const handleResize = () => {
+      if (!splitVerticalRef.current) return;
+
+      splitVerticalRef.current.split.setSizes([5, 95]);
+    };
+
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
   });
 
   return (
@@ -172,8 +186,10 @@ const WorkSpace: FC = () => {
         />
       </div>
       <Split
-        className={s.splitHorizontal}
+        ref={splitVerticalRef}
+        className={s.splitVertical}
         minSize={250}
+        expandToMin={true}
         gutterSize={4}
         sizes={[5, 95]}
         onDragEnd={() => {
@@ -230,7 +246,7 @@ const WorkSpace: FC = () => {
           {isLoaded && (
             <>
               <Split
-                className={s.splitVertical}
+                className={s.splitHorizontal}
                 minSize={50}
                 gutterSize={4}
                 sizes={[80, 20]}