Adjusts sidepanel layout

src/editor/js/components/editor.tsx

@@ -484,24 +484,6 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                             onChange={this.onHistoryChange}
                         />
                         <hr />
-                        <ul className="instructions">
-                            <li>Click background to create node</li>
-                            <li>SHIFT+Click background to clear selection</li>
-                            <li>Click node to select and edit</li>
-                            <li>CTRL+Click node to delete</li>
-                            <li>CTRL+Click link to delete</li>
-                            <li>SHIFT+Click a second node to connect</li>
-                            {this.state.connectOnDrag ? (
-                                <li>
-                                    Drag node close to other node to connect
-                                </li>
-                            ) : (
-                                ""
-                            )}
-                            <li>DELETE to delete selected node</li>
-                            <li>ESCAPE to clear selection</li>
-                        </ul>
-                        <hr />
                         <NodeDetails
                             selectedNode={this.state.selectedNode}
                             allTypes={
@@ -554,6 +536,24 @@ export class Editor extends React.PureComponent<propTypes, stateTypes> {
                         <label htmlFor="connect-on-drag">
                             Connect nodes when dragged
                         </label>
+                        <hr />
+                        <ul className="instructions">
+                            <li>Click background to create node</li>
+                            <li>SHIFT+Click background to clear selection</li>
+                            <li>Click node to select and edit</li>
+                            <li>CTRL+Click node to delete</li>
+                            <li>CTRL+Click link to delete</li>
+                            <li>SHIFT+Click a second node to connect</li>
+                            {this.state.connectOnDrag ? (
+                                <li>
+                                    Drag node close to other node to connect
+                                </li>
+                            ) : (
+                                ""
+                            )}
+                            <li>DELETE to delete selected node</li>
+                            <li>ESCAPE to clear selection</li>
+                        </ul>
                     </div>
                 </div>
             </div>

src/editor/js/components/nodedetails.css

@@ -7,3 +7,8 @@ div#ks-editor #nodedetails .preview-image {
     max-width: 3rem;
     width: auto;
 }
+
+div#ks-editor #nodedetails #node-name {
+    font-weight: bold;
+    font-size: large;
+}