fixed log overflow, resize sizing

components/LogBox.tsx

@@ -45,9 +45,15 @@ const LogBox: React.FC<ILogBox> = ({
         background: "$mauve1",
         position: "relative",
         flex: 1,
+        height: "100%",
       }}
     >
-      <Container css={{ px: 0, flexShrink: 1 }}>
+      <Container
+        css={{
+          px: 0,
+          height: "100%",
+        }}
+      >
         <Flex
           css={{
             py: "$3",
@@ -81,6 +87,7 @@ const LogBox: React.FC<ILogBox> = ({
             )}
           </Flex>
         </Flex>
+
         <Box
           as="pre"
           ref={logRef}
@@ -90,13 +97,14 @@ const LogBox: React.FC<ILogBox> = ({
             display: "flex",
             flexDirection: "column",
             width: "100%",
+            height: "100%",
+            overflowY: "auto",
             fontSize: "13px",
             fontWeight: "$body",
             fontFamily: "$monospace",
             px: "$3",
             pb: "$2",
             whiteSpace: "normal",
-            overflowY: "auto",
           }}
         >
           {logs?.map((log, index) => (

components/LogText.tsx

@@ -4,7 +4,7 @@ const Text = styled("span", {
   fontFamily: "$monospace",
   lineHeight: "$body",
   color: "$text",
-  wordWrap: 'break-word',
+  wordWrap: "break-word",
   variants: {
     variant: {
       log: {

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

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

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

@@ -26,6 +26,7 @@ const Home: NextPage = () => {
       direction="vertical"
       sizes={[70, 30]}
       minSize={[100, 100]}
+      gutterSize={4}
       style={{ height: "calc(100vh - 60px)" }}
     >
       <main style={{ display: "flex", flex: 1, position: "relative" }}>

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

@@ -356,6 +356,7 @@ const Test = () => {
       <Split
         direction="vertical"
         sizes={[50, 50]}
+        gutterSize={4}
         style={{ height: "calc(100vh - 60px)" }}
       >
         <Flex
@@ -363,7 +364,6 @@ const Test = () => {
           fluid
           css={{
             justifyContent: "center",
-            mb: "$2",
             p: "$3 $2",
           }}
         >
@@ -371,6 +371,7 @@ const Test = () => {
             direction="horizontal"
             sizes={[50, 50]}
             minSize={[180, 320]}
+            gutterSize={4}
             gutterAlign="center"
             style={{
               display: "flex",
@@ -409,6 +410,7 @@ const Test = () => {
             direction="horizontal"
             sizes={[50, 50]}
             minSize={[320, 160]}
+            gutterSize={4}
             style={{
               display: "flex",
               flexDirection: "row",
@@ -416,14 +418,19 @@ const Test = () => {
               height: "100%",
             }}
           >
-            <Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
+            <Box
+              css={{
+                borderRight: "1px solid $mauve8",
+                height: "100%",
+              }}
+            >
               <LogBox
                 title="Development Log"
                 logs={snap.transactionLogs}
                 clearLog={() => (state.transactionLogs = [])}
               />
             </Box>
-            <Box css={{ width: "50%" }}>
+            <Box css={{ height: "100%" }}>
               <DebugStream />
             </Box>
           </Split>

styles/globals.css

@@ -6,6 +6,7 @@ body,
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  overflow-y: hidden;
 }
 
 * {
@@ -14,16 +15,18 @@ body,
 
 .gutter {
   position: relative;
-  background: transparent;
+  background-color: rgba(255, 255, 255, 0);
-  transition: border-color 0.3s;
+  transition: border-color 0.3s, background-color 0.3s;
 }
 .gutter-vertical {
-  margin-top: -10px;
   border-bottom: 1px solid transparent;
+  margin-top: -5px;
+  padding-top: 4px;
 }
 .gutter-horizontal {
-  margin-left: -10px;
   border-right: 1px solid transparent;
+  margin-left: -5px;
+  padding-left: 4px;
 }
 .gutter-vertical:hover {
   cursor: row-resize;