adjusted gutter sizes and highlight style

pages/deploy/[[...slug]].tsx

@@ -22,6 +22,7 @@ const Deploy = () => {
     <Split
       direction="vertical"
       gutterSize={4}
+      gutterAlign="center"
       sizes={[40, 60]}
       style={{ height: "calc(100vh - 60px)" }}
     >
@@ -33,6 +34,7 @@ const Deploy = () => {
         sizes={[50, 50]}
         minSize={[320, 160]}
         gutterSize={4}
+        gutterAlign="center"
         style={{
           display: "flex",
           flexDirection: "row",

pages/develop/[[...slug]].tsx

@@ -26,6 +26,7 @@ const Home: NextPage = () => {
       direction="vertical"
       sizes={[70, 30]}
       minSize={[100, 100]}
+      gutterAlign="center"
       gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
     >

pages/test/[[...slug]].tsx

@@ -357,6 +357,7 @@ const Test = () => {
         direction="vertical"
         sizes={[50, 50]}
         gutterSize={4}
+        gutterAlign="center"
         style={{ height: "calc(100vh - 60px)" }}
       >
         <Flex
@@ -411,6 +412,7 @@ const Test = () => {
             sizes={[50, 50]}
             minSize={[320, 160]}
             gutterSize={4}
+            gutterAlign="center"
             style={{
               display: "flex",
               flexDirection: "row",

styles/globals.css

@@ -15,30 +15,27 @@ body,
 
 .gutter {
   position: relative;
-  transition: border-color 0.3s;
+  transition: border-color 0.3s, background-color 0.3s;
 }
+
 .gutter-vertical {
-  border-bottom: 1px solid transparent;
-  margin-top: -5px;
-  padding-top: 4px;
+  margin-top: -4px;
 }
 .gutter-horizontal {
-  border-right: 1px solid transparent;
-  margin-left: -5px;
-  padding-left: 4px;
+  margin-left: -4px;
 }
 .gutter-vertical:hover {
   cursor: row-resize;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 html.light .gutter-vertical:hover {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.25);
 }
 .gutter-horizontal:hover {
   cursor: col-resize;
-  border-right: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: rgba(255, 255, 255, 0.25);
 }
 
 html.light .gutter-horizontal:hover {
-  border-right: 1px solid rgba(0, 0, 0, 0.5);
+  background-color: rgba(0, 0, 0, 0.25);
 }