Fixed and contexts and made it better

Author: AttAditya

src/components/commons/Input/style.css

@@ -4,7 +4,6 @@
   background: #7f7f7f88;
   border: 0.25rem solid #ffffff1a;
   border-radius: 0.75rem;
-  box-shadow: 0 0 2rem 1rem #0000004d;
   font-size: 1rem;
   padding: 0.5rem;
   cursor: text;

src/components/engine/BaseVariant/style.css

@@ -1,5 +1,6 @@
 .node-base-input {
   grid-column: 1 / -1;
+  flex-basis: 100%;
   padding: 0.5rem 0.25rem;
 }
 

src/components/engine/DecorativeNode/style.css

@@ -1,4 +1,5 @@
 .decorative-node {
+  flex-basis: 100%;
   grid-column: 1 / -1;
   margin-top: 0.5rem;
   display: flex;

src/components/engine/FillerNode/index.tsx

@@ -0,0 +1,10 @@
+import "./style.css";
+
+export function FillerNode() {
+  return (<>
+    <div className="filler-node-wrapper">
+      <span className="filler-node" />
+    </div>
+  </>);
+}
+

src/components/engine/FillerNode/style.css

@@ -0,0 +1,18 @@
+.filler-node-wrapper {
+  --size: 3rem;
+  --icon-size: 1.5rem;
+
+  position: relative;
+  width: var(--size);
+  height: 0;
+}
+
+.filler-node {
+  width: var(--size);
+  height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+

src/components/engine/Node/style.css

@@ -1,7 +1,13 @@
-.node {
+.node-wrapper {
   --size: 3rem;
   --icon-size: 1.5rem;
 
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+}  
+
+.node {
   width: var(--size);
   height: var(--size);
   display: flex;
@@ -95,9 +101,3 @@
   display: none;
 }
 
-.node-wrapper {
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-}
-

src/components/engine/NodeContext/index.tsx

@@ -5,6 +5,7 @@ import { Glass } from "@components/commons/Glass";
 import { Canvas } from "@components/engine/Canvas";
 import { Node } from "@components/engine/Node";
 import { Variants } from "@components/engine/Variants";
+import { FillerNode } from "@components/engine/FillerNode";
 
 import "./style.css";
 
@@ -38,13 +39,21 @@ export function NodeContext({
 
       {
         (!isBase && showCanvas) && (<>
+          <span className="context-break" />
           <Glass className="context-canvas">
             <Canvas baseId={nodeId} />
           </Glass>
         </>)
       }
 
       <Variants node={node} />
+      <div className="context-length">
+        <FillerNode />
+        <FillerNode />
+        <FillerNode />
+        <FillerNode />
+        <FillerNode />
+      </div>
     </Glass>
   </>);
-}
+}

src/components/engine/NodeContext/style.css

@@ -4,8 +4,8 @@
   left: 50%;
   padding: 1rem;
   cursor: default;
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
   transform: translateX(-50%) translateY(-50%) scale(0);
   opacity: 0;
@@ -33,6 +33,19 @@
 
 .context-canvas {
   grid-column: 1 / -1;
-  margin-top: 0.5rem;
+  flex-basis: 100%;
+}
+
+.context-break {
+  flex-basis: 100%;
+  height: 0;
+}
+
+.context-length {
+  flex-basis: 100%;
+  height: 0;
+  display: flex;
+  gap: 0.5rem;
+  margin-top: -20px;
 }