Revert "Add resizing handle for editor pane"

b2874f7

packages/website/src/components/App.jsx

@@ -7,7 +7,6 @@ import Editor from "./Editor.jsx";
 import OutputToolbar from "./OutputToolbar.jsx";
 import Output from "./Output.jsx";
 import Errors from "./Errors.jsx";
-import Resize from "./Resize.jsx";
 
 const worker = new ReloadablePromiseWorker(() => new Worker(new URL("../worker.js", import.meta.url), { type: "module" }));
 
@@ -29,10 +28,8 @@ export default function App({ initialSrc }) {
   const [errors, setErrors] = useState([]);
   const [zoom, setZoom] = useState("fit");
   const [isValid, setValid] = useState(false);
-
-  const appRef = useRef(null);
-  const editorRef = useRef(null);
   const imageZoomRef = useRef(null);
+  const editorRef = useRef(null);
 
   function handleCopyLink() {
     copyLink(src);
@@ -53,10 +50,6 @@ export default function App({ initialSrc }) {
     setDebouncedSrc(example);
   }
 
-  function handleResize(width) {
-    appRef.current.style.setProperty("--editor-width", width + "px");
-  }
-
   const handleSrcChangeDebounced = useMemo(() => {
     return debounce(setDebouncedSrc, 750);
   }, []);
@@ -95,13 +88,12 @@ export default function App({ initialSrc }) {
   const zoomEnabled = result?.format == "svg-image";
 
   return (
-    <div id="app" ref={appRef}>
+    <>
       <EditorToolbar onLoadExample={handleLoadExample} onCopyLink={handleCopyLink} />
       <Editor defaultValue={src} onChange={handleSrcChange} ref={editorRef} />
-      <Resize onResize={handleResize} />
       <OutputToolbar options={options} onOptionChange={handleOptionChange} zoomEnabled={zoomEnabled} zoom={zoom} onZoomChange={setZoom} onZoomIn={() => imageZoomRef.current?.zoomIn()} onZoomOut={() => imageZoomRef.current?.zoomOut()} />
       <Output result={result} zoom={zoom} imageZoomRef={imageZoomRef} onZoomChange={setZoom} isValid={isValid} />
       <Errors errors={errors} />
-    </div>
+    </>
   );
 }

packages/website/src/index.html

@@ -21,7 +21,7 @@
       </nav>
     </header>
 
-    <div id="root">
+    <div id="app">
     </div>
   </div>
 

packages/website/src/index.jsx

@@ -6,7 +6,7 @@ import { getExample, defaultExampleName } from "./examples.js";
 
 const initialSrc = getInputFromSearch(window.location.search, getExample(defaultExampleName));
 
-const root = createRoot(document.getElementById("root"));
+const root = createRoot(document.getElementById("app"));
 root.render(
   <StrictMode>
     <App initialSrc={initialSrc} />

packages/website/src/styles/app.css

@@ -17,22 +17,17 @@ body {
   grid-template-rows: max-content minmax(0, 1fr);
 }
 
-#root {
-  display: grid;
-  grid-area: app;
-}
-
 #app {
-  --editor-width: 50%;
-
+  grid-area: app;
   display: grid;
-  grid-template-areas: "editor-toolbar resize output-toolbar" "editor resize output" "editor resize errors";
-  grid-template-columns: minmax(300px, var(--editor-width)) 1px minmax(450px, 1fr);
+  grid-template-areas: "editor-toolbar output-toolbar" "editor output" "editor errors";
+  grid-template-columns: 50% 1fr;
   grid-template-rows: max-content 1fr fit-content(20%);
 }
 
 .editor {
   grid-area: editor;
+  border-right: 1px solid #ccc;
 }
 
 .cm-editor {
@@ -96,6 +91,7 @@ body {
 
 .editor-toolbar {
   grid-area: editor-toolbar;
+  border-right: 1px solid #ccc;
   justify-content: center;
 }
 
@@ -164,36 +160,21 @@ body {
     grid-template-rows: max-content 30% max-content 1fr fit-content(20%);
   }
 
+  .editor {
+    border-right: none;
+  }
+
   .output-toolbar {
     border-top: 1px solid #ccc;
   }
+
+  .editor-toolbar {
+    border-right: none;
+  }
 }
 
 @media (max-width: 450px) {
   .editor {
     font-size: 16px;
   }
 }
-
-
-.resize {
-  grid-area: resize;
-  background: #ccc;
-  position: relative;
-  z-index: 1;
-}
-
-.resize-handle {
-  width: 7px;
-  left: -3px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  cursor: ew-resize;
-}
-
-@media (max-width: 750px) {
-  .resize {
-    display: none;
-  }
-}