temp fix: node size getting too wide

src/containers/LiveEditor/Node.tsx

@@ -18,6 +18,7 @@ const StyledWrapper = styled.div<{
   width: ${({ circle }) => (circle ? "20px" : "auto")};
   height: ${({ circle }) => (circle ? "20px" : "auto")};
   min-width: ${({ circle }) => !circle && "100px"};
+  max-width: 400px;
   text-align: ${({ isArray }) => isArray && "center"};
   border-radius: ${({ circle }) => circle && "50%"};
 `;
@@ -26,6 +27,12 @@ const StyledKey = styled.span`
   color: ${({ theme }) => theme.BLURPLE};
 `;
 
+const StyledLineWrapper = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
 export const CustomNodeComponent: React.FC<{ data: Data; id: string }> = ({
   id,
   data,
@@ -72,10 +79,10 @@ export const CustomNodeComponent: React.FC<{ data: Data; id: string }> = ({
             typeof entries[1] === "string" || typeof entries[1] === "number";
 
           return (
-            <div key={entries[0]}>
+            <StyledLineWrapper key={entries[0]}>
               <StyledKey>{entries[0]}: </StyledKey>
               {isValidValue && entries[1]}
-            </div>
+            </StyledLineWrapper>
           );
         })}
 

src/containers/LiveEditor/helpers.ts

@@ -13,7 +13,7 @@ export const getLayoutPosition = (direction: string, elements: Elements, dynamic
   elements.forEach((el) => {
     if (isNode(el)) {
       dagreGraph.setNode(el.id, {
-        width: dynamic ? el.__rf.width : 200,
+        width: dynamic ? el.__rf.width : 400,
         height: dynamic ? el.__rf.height : 100,
       });
     } else {