fix: improve action sidebar layout and enhance action block styling for better usability

Author: mjabascal10

frontend/src/app/incident-response/shared/component/action-builder/action-builder.component.html

@@ -84,29 +84,43 @@ <h4 class="panel-title m-0">Flow Actions</h4>
 
         <div class="workflow-timeline mb-3">
 
-          <div *ngFor="let action of workflow; let first = first" class="action-wrapper d-flex flex-column align-items-center w-100">
+          <div *ngFor="let action of workflow; let first = first" class="action-wrapper d-flex flex-column w-100">
             <!-- Action block -->
-            <div class="action-block d-flex flex-column align-items-center justify-content-center w-100 p-2" style="height: 120px;">
-              <div class="d-flex w-100 justify-content-end">
-                <app-action-conditional *ngIf="!first" [option]="action.conditional" (optionChange)="updateAction(action, $event)" ></app-action-conditional>
+            <div class="action-block d-flex flex-column w-100 p-2" style="height: 120px;">
+
+              <div class="d-flex justify-content-between align-items-center w-100 mb-1">
+                <div class="fw-bold pl-2">{{ action.title }}</div>
+                <div class="d-flex align-items-center">
+                  <app-action-conditional
+                    *ngIf="!first"
+                    [option]="action.conditional"
+                    (optionChange)="updateAction(action, $event)">
+                  </app-action-conditional>
+                  <div
+                    class="icon-cross2 font-size-xs cursor-pointer ml-2"
+                    (click)="removeAction(action)">
+                  </div>
+                </div>
               </div>
-              <div class="d-flex flex-column w-100 justify-content-center">
-                <div class="card-body pl-2 pr-0 py-2 d-flex align-items-center justify-content-between w-100">
-                  <div class="d-flex align-items-center">
-                      <div class="icon-box mr-2" style="margin-right: 8px;"></div>
-                    <div>
-                      <div class="fw-bold">{{ action.title }}</div>
-                      <small style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;"  class="text-muted">
-                        {{ action.description }}
-                      </small>
+
+              <div class="d-flex flex-grow-1 align-items-center w-100">
+                <div class="icon-box mr-2" style="margin-right: 8px;"></div>
+                <div class="d-flex flex-column w-100 justify-content-center">
+                  <div class="card-body pl-2 pr-0 py-2 w-100">
+                    <div class="text-muted" style="
+                      display: -webkit-box;
+                      -webkit-line-clamp: 2;
+                      -webkit-box-orient: vertical;
+                      overflow: hidden;
+                      text-overflow: ellipsis;">
+                      {{ action.description }}
                     </div>
                   </div>
-                  <div class="icon-bin font-size-xs text-danger cursor-pointer" (click)="removeAction(action)"></div>
                 </div>
               </div>
-
             </div>
 
+
             <div *ngIf="workflow" class="timeline-connector">
               <div class="line-vertical"></div>
               <div class="arrow-down">&#x2193;</div>

frontend/src/app/incident-response/shared/component/action-sidebar/action-sidebar.component.scss

@@ -55,3 +55,7 @@
   font-size: .720rem;
 }
 
+.fw-bold {
+  font-weight: 700;
+}
+

frontend/src/app/incident-response/shared/component/action-sidebar/action-sidebar.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {WorkflowActionsService} from '../../services/workflow-actions.service';
+import {ActionTerminalComponent} from '../action-terminal/action-terminal.component';
 import {ActionSidebarService} from './action-sidebar.service';
-import {ActionTerminalComponent} from "../action-terminal/action-terminal.component";
-import {ModalService} from "../../../../core/modal/modal.service";
-import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
 
 @Component({
   selector: 'app-action-sidebar',