Make role editor full screen

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

@@ -8,7 +8,7 @@
   const flow = useSvelteFlow()
 </script>
 
-<div class="control top-left">
+<div class="control top-right">
   <div class="group">
     <ActionButton
       icon="Add"
@@ -36,25 +36,25 @@
     align-items: center;
     gap: 12px;
   }
-  .top-left {
+  .top-right {
     top: 20px;
-    left: 20px;
+    right: 20px;
   }
   .bottom-right {
     bottom: 20px;
     right: 20px;
   }
-  .top-left :global(.spectrum-Button),
-  .top-left :global(.spectrum-ActionButton),
-  .top-left :global(.spectrum-Icon) {
+  .top-right :global(.spectrum-Button),
+  .top-right :global(.spectrum-ActionButton),
+  .top-right :global(.spectrum-Icon) {
     color: var(--spectrum-global-color-gray-900) !important;
   }
-  .top-left :global(.spectrum-Button),
-  .top-left :global(.spectrum-ActionButton) {
+  .top-right :global(.spectrum-Button),
+  .top-right :global(.spectrum-ActionButton) {
     background: var(--spectrum-global-color-gray-200) !important;
   }
-  .top-left :global(.spectrum-Button:hover),
-  .top-left :global(.spectrum-ActionButton:hover) {
+  .top-right :global(.spectrum-Button:hover),
+  .top-right :global(.spectrum-ActionButton:hover) {
     background: var(--spectrum-global-color-gray-300) !important;
   }
   .group {

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

@@ -157,10 +157,7 @@
 </script>
 
 <div class="title">
-  <div class="heading">
-    <Heading size="S">Manage roles</Heading>
-  </div>
-  <div class="description">Roles inherit permissions from each other.</div>
+  <div class="heading" />
 </div>
 <div class="flow">
   <SvelteFlow
@@ -180,22 +177,17 @@
   >
     <Background variant={BackgroundVariant.Dots} />
     <Controls />
+    <div class="title">
+      <Heading size="S">Manage roles</Heading>
+    </div>
+    <div class="footer">Roles inherit permissions from each other</div>
   </SvelteFlow>
 </div>
 
 <style>
-  .heading {
-    border-bottom: 1px solid var(--spectrum-global-color-gray-300);
-    margin-bottom: 20px;
-    padding-bottom: 12px;
-  }
-  .description {
-    color: var(--spectrum-global-color-gray-600);
-    margin-bottom: calc(20px - var(--spacing-l));
-  }
   .flow {
+    margin: -28px -40px -40px -40px;
     flex: 1 1 auto;
-    border-radius: 8px;
     overflow: hidden;
     position: relative;
     --background-color: var(--spectrum-global-color-gray-50);
@@ -204,6 +196,17 @@
     --handle-color: var(--spectrum-global-color-gray-600);
     --selected-color: var(--spectrum-global-color-blue-400);
   }
+  .title {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+  }
+  .footer {
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    color: var(--spectrum-global-color-gray-600);
+  }
 
   /* Customise svelte-flow theme */
   .flow :global(.svelte-flow) {