From f756cf1afe8ddac65c15112c6201851a9db270bf Mon Sep 17 00:00:00 2001
From: Agney <agney.menon@bigbinary.com>
Date: Wed, 13 Oct 2021 23:46:32 +0530
Subject: [PATCH] - increase divider space - keep result side interactive

---
 example/src/index.js               |  6 +++++-
 playground/src/Draggable/index.tsx | 11 ++++++++++-
 playground/src/Result/Frame.tsx    | 15 ++-------------
 playground/src/utils/theme.ts      |  5 ++++-
 4 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/example/src/index.js b/example/src/index.js
index 15c4c5e..32b8ea7 100644
--- a/example/src/index.js
+++ b/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'));
     `,
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
index 2884e4f..4e77d80 100644
--- a/playground/src/Draggable/index.tsx
+++ b/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>
   );
diff --git a/playground/src/Result/Frame.tsx b/playground/src/Result/Frame.tsx
index 99be8d6..1b026c4 100644
--- a/playground/src/Result/Frame.tsx
+++ b/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 {
diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
index d9acda8..968f56d 100644
--- a/playground/src/utils/theme.ts
+++ b/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`,