feat: vertical layout

Author: philippfromme

demo/App.jsx

@@ -129,51 +129,51 @@ function App() {
       <div className="modeler" ref={ modelerRef }>
         <div id="canvas" className="canvas"></div>
         <div id="properties" className="properties-panel"></div>
-      </div>
-      <div className="task-testing">
-        <TestTab
-          injector={ injector }
-          isConnectionConfigured={ isConnectionConfigured }
-          configureConnectionBannerTitle="No cluster selected"
-          configureConnectionBannerDescription="Select a Camunda 8.8 cluster to enable task testing."
-          configureConnectionLabel="Select cluster"
-          onConfigureConnection={ () => {
-            if (window.confirm('Cluster selected?')) {
-              setIsConnectionConfigured(true);
-            }
-          } }
-          onTestTask={ () => {
-            if (isConnectionConfigured) {
-              return true;
-            }
-
-            if (window.confirm('Cluster selected?')) {
-              setIsConnectionConfigured(true);
-
-              return true;
-            }
-
-            return false;
-          } }
-          api={ {
-            deploy,
-            startInstance,
-            getProcessInstance,
-            getProcessInstanceVariables,
-            getProcessInstanceElementInstances,
-            getProcessInstanceIncident
-          } }
-          config={ config }
-          onConfigChanged={ onConfigChanged }
-          operateBaseUrl={ operateURL }
-          documentationUrl="https://docs.camunda.io/"
-          onTaskExecutionStarted={ (element) => {
-            console.log('Task execution started:', element.id);
-          } }
-          onTaskExecutionFinished={ (element, result) => {
-            console.log('Task execution finished:', element.id, result.success ? 'success' : result.reason, result);
-          } }
-        />
+        <div className="task-testing">
+          <TestTab
+            injector={ injector }
+            isConnectionConfigured={ isConnectionConfigured }
+            configureConnectionBannerTitle="No cluster selected"
+            configureConnectionBannerDescription="Select a Camunda 8.8 cluster to enable task testing."
+            configureConnectionLabel="Select cluster"
+            onConfigureConnection={ () => {
+              if (window.confirm('Cluster selected?')) {
+                setIsConnectionConfigured(true);
+              }
+            } }
+            onTestTask={ () => {
+              if (isConnectionConfigured) {
+                return true;
+              }
+
+              if (window.confirm('Cluster selected?')) {
+                setIsConnectionConfigured(true);
+
+                return true;
+              }
+
+              return false;
+            } }
+            api={ {
+              deploy,
+              startInstance,
+              getProcessInstance,
+              getProcessInstanceVariables,
+              getProcessInstanceElementInstances,
+              getProcessInstanceIncident
+            } }
+            config={ config }
+            onConfigChanged={ onConfigChanged }
+            operateBaseUrl={ operateURL }
+            documentationUrl="https://docs.camunda.io/"
+            onTaskExecutionStarted={ (element) => {
+              console.log('Task execution started:', element.id);
+            } }
+            onTaskExecutionFinished={ (element, result) => {
+              console.log('Task execution finished:', element.id, result.success ? 'success' : result.reason, result);
+            } }
+          />
+        </div>
       </div>
     </>
   );

demo/style.css

@@ -11,13 +11,12 @@ body {
 }
 
 .modeler {
-  overflow: auto;
   display: flex;
-  height: calc(100% - 300px);
+  height: 100%;
 }
 
 .canvas {
-  width: calc(100% - 300px);
+  flex: 1;
 }
 
 .properties-panel {
@@ -26,8 +25,8 @@ body {
 }
 
 .task-testing {
-  height: 300px;
-  border-top: 1px solid hsl(225, 10%, 75%);
+  width: 500px;
+  border-left: 1px solid hsl(225, 10%, 75%);
 }
 
 .djs-minimap {