src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx

@@ -11,7 +11,6 @@ import {
 } from 'react';
 
 
-// improve later to create better automatic IDs
 let id = 0;
 const getId = () => `dndnode_${id++}`;
 
@@ -48,7 +47,8 @@ function DraggableNode({ className, children, nodeType, onDrop }: DraggableNodeP
   });
 
   return (
-        <div className={className === "default" ? "draggable-node" :  "draggable-node" + "__" + className} ref={draggableRef}>
+    <div className={className === "default" ? "draggable-node" : "draggable-node" + "__" + className}
+         ref={draggableRef}>
       {children}
     </div>
   );
@@ -120,11 +120,26 @@ export function Sidebar() {
   );
 
   return (
-        <aside style={{padding: '10px 10px',outline: '2.5pt solid black',borderRadius: '0pt 0pt 5pt 5pt', borderColor:'dimgrey', backgroundColor:'canvas',  display:'flex', flexDirection: 'column', gap: '1rem'}}>
+    <aside style={{
+      padding: '10px 10px',
+      outline: '2.5pt solid black',
+      borderRadius: '0pt 0pt 5pt 5pt',
+      borderColor: 'dimgrey',
+      backgroundColor: 'canvas',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '1rem'
+    }}>
       <div className="description">
         You can drag these nodes to the pane to create new nodes.
       </div>
-            <div className="DraggableNodeContainer" style={{backgroundColor:'canvas', display: 'flex', flexDirection: 'row', gap: '1rem', justifyContent: 'center'}}>
+      <div className="DraggableNodeContainer" style={{
+        backgroundColor: 'canvas',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1rem',
+        justifyContent: 'center'
+      }}>
         <DraggableNode className="phase" nodeType="phase" onDrop={handleNodeDrop}>
           phase Node
         </DraggableNode>