From 0348513929677bd094fef032f5fad49334589bbd Mon Sep 17 00:00:00 2001
From: Michael Howell <michael@notriddle.com>
Date: Wed, 20 Aug 2025 21:08:01 -0700
Subject: [PATCH] Use same column resize handle as rustdoc and mdbook

---
 ui/frontend/Playground.module.css | 20 ++++++++++++++++++++
 ui/frontend/Playground.tsx        |  4 ++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/ui/frontend/Playground.module.css b/ui/frontend/Playground.module.css
index 618c8d405..fb32358ec 100644
--- a/ui/frontend/Playground.module.css
+++ b/ui/frontend/Playground.module.css
@@ -43,7 +43,27 @@
 
 .splitRowsGutterHandle {
   transform: rotate(90deg);
+}
+
+.splitColumnsGutterHandle, .splitRowsGutterHandle {
   pointer-events: none;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.splitColumnsGutterHandle::before, .splitRowsGutterHandle::before {
+  content: "";
+  width: 2px;
+  height: 12px;
+  border-left: dotted 2px currentColor;
+}
+
+.splitColumnsGutterHandle::after, .splitRowsGutterHandle::after {
+  content: "";
+  width: 2px;
+  height: 16px;
+  border-right: dotted 2px currentColor;
 }
 
 .splitColumnsGutter {
diff --git a/ui/frontend/Playground.tsx b/ui/frontend/Playground.tsx
index 3454713d6..106b53ffe 100644
--- a/ui/frontend/Playground.tsx
+++ b/ui/frontend/Playground.tsx
@@ -28,7 +28,7 @@ const UNFOCUSED_GRID_STYLE = {
 
 const HANDLE_STYLES = {
   [Orientation.Horizontal]: [styles.splitRowsGutter, styles.splitRowsGutterHandle],
-  [Orientation.Vertical]: [styles.splitColumnsGutter, ''],
+  [Orientation.Vertical]: [styles.splitColumnsGutter, styles.splitColumnsGutterHandle],
 }
 
 // We drop down to lower-level split-grid code and use some hooks
@@ -72,7 +72,7 @@ const ResizableArea: React.FC = () => {
       <div className={styles.editor}><Editor /></div>
       { isFocused &&
         <div ref={dragHandle} className={handleOuterStyle}>
-          <span className={handleInnerStyle}>⣿</span>
+          <span className={handleInnerStyle}></span>
         </div>
       }
       { somethingToShow && <div className={styles.output}><Output /></div>}