Fixed spacing issue and panel display issue on workflow instances. Changed arrow direction on expanded panels. (#4145)

src/designer/designer_packages/elsa-workflows-designer/src/components/panel/panel.tsx

@@ -81,6 +81,7 @@ export class Panel {
     toggleClassMap[PanelPosition.Bottom] = 'elsa-panel-toggle-bottom';
 
     const toggleCssClass = toggleClassMap[position];
+    const iconOrientationCssClass = isExpanded ? 'tw-rotate-180': '';
 
     const dragBarClassMap = {
       [PanelPosition.Left]: 'tw-right-0 tw-h-full tw-cursor-col-resize tw-w-1',
@@ -99,7 +100,7 @@ export class Panel {
 
         <div class={`tw-text-white ${toggleCssClass}`} onClick={() => this.onToggleClick()}>
           <svg
-            class="tw-h-6 tw-w-6 tw-text-gray-700"
+            class={`tw-h-6 tw-w-6 tw-text-gray-700 ${iconOrientationCssClass}`}
             width="24"
             height="24"
             viewBox="0 0 24 24"

src/designer/designer_packages/elsa-workflows-designer/src/modules/flowchart/flowchart.scss

@@ -5,7 +5,6 @@
     cursor: default;
   }
   width: calc(100vw - var(--workflow-editor-width) - var(--activity-picker-width)) !important;
-  height: calc(100vh - var(--activity-editor-height) - 54px - 64px) !important;
 }
 
 .x6-widget-selection-box {

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/editor.scss

@@ -3,6 +3,11 @@
   --activity-picker-width: 300px;
   --activity-editor-height: 200px;
 }
+
+.x6-graph-scroller {
+  height: calc(100vh - var(--activity-editor-height) - 64px) !important;
+}
+
 elsa-flowchart {
   position: absolute;
   left: var(--activity-picker-width);

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/viewer.scss

@@ -3,6 +3,11 @@
   --activity-picker-width: 300px;
   --activity-editor-height: 200px;
 }
+
+.x6-graph-scroller {
+  height: calc(100vh - var(--activity-editor-height) - 64px) !important;
+}
+
 elsa-flowchart {
   position: absolute;
   left: var(--activity-picker-width);

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/viewer.tsx

@@ -143,7 +143,7 @@ export class WorkflowInstanceViewer {
     }
     else if(activity.root == null && activity.body.type == "Elsa.Flowchart"){
       return activity.body as Flowchart;
-    } 
+    }
     else {
       return this.findFlowchartOfActivityRecursive((activity as Workflow).root);
     }
@@ -261,7 +261,7 @@ export class WorkflowInstanceViewer {
         <elsa-panel
           class="elsa-activity-editor-container"
           position={PanelPosition.Bottom}
-          onExpandedStateChanged={e => this.onActivityEditorPanelStateChanged(e.detail)}>
+        >
           <div class="activity-editor-container">
             {this.renderSelectedObject()}
           </div>