Prevent expanding the window size when adjusting the split

Since we were rotating the *entire* gutter, it would easily extend
beyond the window boundaries, adding a scrollbar to the entire
playground. Instead, rotate only the handle icon itself. Due to [a
limitation with split.js][limitation], we have to also ignore pointer
events on the handle since it's now a child of the gutter.

[limitation]: nathancahill/split#354

Author: shepmaster

ui/frontend/Playground.module.css

@@ -40,6 +40,10 @@ $splitSecondaryDimension: 1fr;
 .splitRowsGutter {
   composes: -gutter;
   cursor: row-resize;
+}
+
+.splitRowsGutterHandle {
+  pointer-events: none;
   transform: rotate(90deg);
 }
 

ui/frontend/Playground.tsx

@@ -44,7 +44,9 @@ const SplitRows: React.SFC<SplitProps> = ({ resizeComplete }) => (
     }) => (
       <div className={styles.splitRows} {...getGridProps()}>
         <div className={styles.editor}><Editor /></div>
-        <div className={styles.splitRowsGutter} {...getGutterProps('row', 1)}>⣿</div>
+        <div className={styles.splitRowsGutter} {...getGutterProps('row', 1)}>
+          <span className={styles.splitRowsGutterHandle}>⣿</span>
+        </div>
         <div className={styles.output}><Output /></div>
       </div>
     )} />