Improve RBAC edutor UI for small flows

packages/builder/src/components/backend/RoleEditor/BracketEdge.svelte

@@ -19,7 +19,7 @@
 
   const getCurlyBracePath = (x1, y1, x2, y2) => {
     const w = 2 // Thickness
-    const q = 2 // Intensity
+    const q = 1 // Intensity
     const i = 28 // Inner radius strenth (lower is stronger)
     const j = 32 // Outer radius strength (higher is stronger)
 

packages/builder/src/components/backend/RoleEditor/constants.js

@@ -5,3 +5,4 @@ export const NodeHeight = GridResolution * 3
 export const NodeWidth = GridResolution * 12
 export const NodeHSpacing = GridResolution * 6
 export const NodeVSpacing = GridResolution * 2
+export const MinHeight = GridResolution * 10

packages/builder/src/components/backend/RoleEditor/utils.js

@@ -5,6 +5,7 @@ import {
   GridResolution,
   NodeHSpacing,
   NodeVSpacing,
+  MinHeight,
 } from "./constants"
 import { getNodesBounds, Position } from "@xyflow/svelte"
 import { Roles } from "constants/backend"
@@ -24,7 +25,15 @@ export const getBounds = nodes => {
       height: 10 * GridResolution,
     }
   }
-  return getNodesBounds(interactiveNodes)
+  let bounds = getNodesBounds(interactiveNodes)
+
+  // Enforce a min size
+  if (bounds.height < MinHeight) {
+    const diff = MinHeight - bounds.height
+    bounds.height = MinHeight
+    bounds.y -= diff / 2
+  }
+  return bounds
 }
 
 // Gets the position of the basic role