From c82bc48aab28e410c70928021b9918233f233fbc Mon Sep 17 00:00:00 2001
From: Sylvia Crowe <software@oneirocosm.com>
Date: Wed, 15 May 2024 14:50:42 -0700
Subject: [PATCH] style: improve plot style with colors and position

This improves the styles surrounding the plot and the input box.
---
 frontend/app/view/plotview.less | 19 +++++++++++++++++++
 frontend/app/view/plotview.tsx  | 12 +++++++++---
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/frontend/app/view/plotview.less b/frontend/app/view/plotview.less
index e69de29bb..a1e0e161a 100644
--- a/frontend/app/view/plotview.less
+++ b/frontend/app/view/plotview.less
@@ -0,0 +1,19 @@
+.plot-view {
+    width: 100%;
+
+    .plot-window {
+        display: flex;
+        justify-content: center;
+    }
+
+    .plot-config {
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        resize: none;
+        max-height: 40%;
+        height: auto;
+        background-color: var(--panel-bg-color);
+        color: var(--main-text-color);
+    }
+}
diff --git a/frontend/app/view/plotview.tsx b/frontend/app/view/plotview.tsx
index 59bb2222b..32f758df4 100644
--- a/frontend/app/view/plotview.tsx
+++ b/frontend/app/view/plotview.tsx
@@ -2,6 +2,8 @@ import * as React from "react";
 import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 
+import "./plotview.less";
+
 function PlotWindow() {
     return <div className="plot-window"></div>;
 }
@@ -91,10 +93,14 @@ function PlotView() {
     }, [plotDef]);
 
     return (
-        <div className="plot-block">
-            ß
+        <div className="plot-view">
             <div className="plot-window" ref={containerRef} />
-            <textarea className="plot-config" onChange={(e) => setPlotDef(e.target.value)} />
+            <textarea
+                className="plot-config"
+                rows={5}
+                onChange={(e) => setPlotDef(e.target.value)}
+                spellCheck={false}
+            />
         </div>
     );
 }