- increase divider space

- keep result side interactive

Author: Agney

example/src/index.js

@@ -13,7 +13,11 @@ import htm from 'htm';
 
 const html = htm.bind(h);
 
-const app = html\`<div>Hello World from Playground!</div>\`
+const app = html\`
+  <div>
+    <p>Hello World from Playground!</p>
+    <input type="text" />
+  </div>\`
 
 render(app, document.getElementById('app'));
     `,

playground/src/Draggable/index.tsx

@@ -9,10 +9,17 @@ const Container = styled("div", forwardRef)`
   align-items: stretch;
 `;
 
+const DividerContainer = styled("div", forwardRef)`
+  width: ${(props) => props.theme.divider.containerWidth}px;
+  background-color: ${(props) => props.theme.divider.dividerBackground};
+`;
+
 const Divider = styled("div", forwardRef)`
   width: ${(props) => props.theme.divider.width}px;
   cursor: col-resize;
   background-color: ${(props) => props.theme.divider.background};
+  margin: 0 auto;
+  height: 100%;
 `;
 
 interface IProps {
@@ -35,7 +42,9 @@ const Draggable: FC<IProps> = ({ className = "", leftChild, rightChild }) => {
   return (
     <Container className={className} ref={containerRef}>
       {leftChild(leftWidth)}
-      <Divider ref={dividerRef} />
+      <DividerContainer>
+        <Divider ref={dividerRef} />
+      </DividerContainer>
       {rightChild(rightWidth)}
     </Container>
   );

playground/src/Result/Frame.tsx

@@ -1,24 +1,13 @@
 import React, { FC, useMemo, useState, memo, useEffect } from "react";
-import {styled} from "goober";
+import { styled } from "goober";
 
 import { ISnippet } from "../types";
 import constructSnippet from "../utils/constructSnippet";
 import ErrorDisplay from "./ErrorDisplay";
 
-const Container = styled('div')`
+const Container = styled("div")`
   position: relative;
   height: 100%;
-
-  &::after {
-    content: "";
-    display: inline-block;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-    top: 0;
-    left: 0;
-  }
 `;
 
 interface IProps {

playground/src/utils/theme.ts

@@ -13,6 +13,7 @@ const lightModeColors = {
   },
   divider: {
     background: "#202020",
+    dividerBackground: "#202020",
   },
   editor: {
     backgroundColor: `#000000`,
@@ -40,6 +41,7 @@ const darkModeColors = {
   },
   divider: {
     background: "rgba(255, 255, 255, 0.5)",
+    dividerBackground: "rgba(255, 255, 255, 0.1)",
   },
   editor: {
     backgroundColor: `#000000`,
@@ -72,8 +74,9 @@ export const theme = {
     background: "rgba(0, 0, 0, 1)",
   },
   divider: {
-    width: 2,
+    width: 4,
     background: "",
+    containerWidth: 8,
   },
   editor: {
     fontFamily: `Consolas, Menlo, Monaco, source-code-pro, Courier New, monospace`,