Adjust layout of workflow editor modal

dainst · Mar 3, 2025 · 991ad35 · 991ad35
1 parent 3a8cd72
commit 991ad35
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/desktop/src/app/components/resources/actions/edit-workflow/workflow-editor-modal.html b/desktop/src/app/components/resources/actions/edit-workflow/workflow-editor-modal.html
@@ -9,10 +9,10 @@
 </div>
 <div id="view-modal-body" class="modal-body bg-light workflow-editor-modal-body">
     <div id="workflow-steps-container">
-        <div *ngFor="let workflowStep of workflowSteps" class="workflow-step row">
-            <div class="col-md-3">{{workflowStep.resource.executionDate}}</div>
-            <div class="col-md-3">{{getCategoryLabel(workflowStep)}}</div>
-            <div class="col-md-6">{{getShortDescriptionLabel(workflowStep)}}</div>
+        <div *ngFor="let workflowStep of workflowSteps" class="workflow-step">
+            <div class="workflow-step-execution-date">{{workflowStep.resource.executionDate}}</div>
+            <div class="workflow-step-category">{{getCategoryLabel(workflowStep)}}</div>
+            <div class="workflow-step-short-description">{{getShortDescriptionLabel(workflowStep)}}</div>
         </div>
     </div>
     <div id="workflow-step-plus-button-container">

diff --git a/desktop/src/app/components/resources/actions/edit-workflow/workflow-editor-modal.scss b/desktop/src/app/components/resources/actions/edit-workflow/workflow-editor-modal.scss
@@ -13,8 +13,29 @@
     user-select: none;
 
     .workflow-step {
-      padding: 10px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.125);;
+      display: flex;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+      .workflow-step-execution-date,
+      .workflow-step-category,
+      .workflow-step-short-description {
+        padding: 10px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .workflow-step-execution-date {
+        width: 120px;
+      }
+
+      .workflow-step-category {
+        width: 200px;
+      }
+
+      .workflow-step-short-description {
+        width: calc(100% - 400px);
+      }
     }
   }