Extracted CSS to own files

src/editor/components/instructions.css

+ul.instructions li {
+    border-radius: 4px;
+    background-color: #eee;
+    padding-left: 3px;
+    padding-right: 2px;
+}
\ No newline at end of file

src/editor/components/instructions.tsx

 import React from "react";
+import "./instructions.css";
 
 interface InstructionsProps {
     connectOnDragEnabled: boolean;
@@ -6,7 +7,7 @@ interface InstructionsProps {
 
 function Instructions({ connectOnDragEnabled }: InstructionsProps) {
     return (
-        <ul className="instructions">
+        <ul className={"instructions"}>
             <li>Click background to create node</li>
             <li>
                 SHIFT+Click and drag on background to add nodes to selection

src/editor/components/sidepanel.css

+.editor-sidepanel {
+    /* resize: horizontal; */
+    overflow: auto;
+    min-width: 300px;
+    max-width: 20%;
+    height: inherit;
+    margin: 0.3rem 0.3rem 0.3rem auto;
+    padding: 0.25rem;
+    float: right;
+
+    background-color: white;
+    border: 1px lightgrey solid;
+    border-radius: 5px;
+}
+
+.editor-sidepanel > * {
+    margin: 0.25rem;
+}

src/editor/components/sidepanel.tsx

 import React from "react";
+import "./sidepanel.css";
+
 import HistoryNavigator from "./historynavigator";
 import { DynamicGraph } from "../graph";
 import NodeDetails from "./nodedetails";
 import { NodeTypesEditor } from "./nodetypeseditor";
 import Settings from "./settings";
 import Instructions from "./instructions";
-import { Checkpoint, History } from "../../common/history";
+import { Checkpoint } from "../../common/history";
 import { Node } from "../../common/graph/node";
 import { NodeType } from "../../common/graph/nodetype";
 import { SimGraphData } from "../../common/graph/graph";
@@ -35,7 +37,7 @@ function Sidepanel({
     connectOnDrag,
 }: SidepanelProps) {
     return (
-        <div id="sidepanel">
+        <div className={"editor-sidepanel"}>
             <HistoryNavigator
                 history={graph.history}
                 onCheckpointLoad={onCheckpointLoad}

src/editor/editor.css

@@ -4,36 +4,6 @@ div#ks-editor #force-graph-renderer {
     flex-grow: 1;
 }
 
-div#ks-editor #sidepanel {
-    /* resize: horizontal; */
-    overflow: auto;
-    min-width: 300px;
-    max-width: 20%;
-    height: inherit;
-    margin: 0.3rem;
-    margin-right: 0.3rem;
-    margin-left: auto;
-    padding: 0.25rem;
-    float: right;
-
-    background-color: white;
-    border: 1px lightgrey solid;
-    border-radius: 5px;
-
-    overflow-y: auto;
-}
-
-div#ks-editor #sidepanel > * {
-    margin: 0.25rem;
-}
-
-div#ks-editor #sidepanel ul.instructions li {
-    border-radius: 4px;
-    background-color: #eee;
-    padding-left: 3px;
-    padding-right: 2px;
-}
-
 div#ks-editor #content {
     display: flex;
 }

src/editor/editor.tsx

@@ -268,36 +268,35 @@ export class Editor extends React.PureComponent<any, stateTypes> {
                                 />
                             </SelectLayer>
                         </div>
+
+                        <Sidepanel
+                            graph={this.state.graph}
+                            onCheckpointLoad={(checkpoint) => {
+                                const graph = new DynamicGraph();
+                                this.setState({
+                                    graph: graph.fromSerializedObject(
+                                        checkpoint.data
+                                    ),
+                                });
+                            }}
+                            onNodeTypeSelect={this.handleNodeTypeSelect}
+                            onConnectOnDragChange={(connectOnDrag) =>
+                                this.setState({
+                                    connectOnDrag: connectOnDrag,
+                                })
+                            }
+                            onLabelVisibilityChange={(visible) =>
+                                this.setState({
+                                    visibleLabels: visible,
+                                })
+                            }
+                            selectedNodes={this.state.selectedNodes}
+                            visibleLabels={this.state.visibleLabels}
+                            connectOnDrag={this.state.connectOnDrag}
+                            onNodeDataChange={this.handleNodeDataChange}
+                        />
                     </div>
                 )}
-                {this.state.graph && (
-                    <Sidepanel
-                        graph={this.state.graph}
-                        onCheckpointLoad={(checkpoint) => {
-                            const graph = new DynamicGraph();
-                            this.setState({
-                                graph: graph.fromSerializedObject(
-                                    checkpoint.data
-                                ),
-                            });
-                        }}
-                        onNodeTypeSelect={this.handleNodeTypeSelect}
-                        onConnectOnDragChange={(connectOnDrag) =>
-                            this.setState({
-                                connectOnDrag: connectOnDrag,
-                            })
-                        }
-                        onLabelVisibilityChange={(visible) =>
-                            this.setState({
-                                visibleLabels: visible,
-                            })
-                        }
-                        selectedNodes={this.state.selectedNodes}
-                        visibleLabels={this.state.visibleLabels}
-                        connectOnDrag={this.state.connectOnDrag}
-                        onNodeDataChange={this.handleNodeDataChange}
-                    />
-                )}
             </div>
         );
     }