Workflow bulk actions

src/assets/styles/common-layout.scss

@@ -328,3 +328,7 @@ section.settings {
 .cdk-overlay-container {
     z-index: 800;
 }
+
+.overflow-hidden {
+    overflow: hidden;
+}

src/lib/listing/workflow/column-header/column-header.component.html

@@ -25,7 +25,10 @@
                   class="all-caps-label"></span>
         </div>
 
-        <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
+        <div #bulkActionsContainer class="flex-1 overflow-hidden">
+            <ng-container *ngIf="bulkActionsContainerWidth" [ngTemplateOutletContext]="{ maxWidth: bulkActionsContainerWidth }"
+                          [ngTemplateOutlet]="bulkActions"></ng-container>
+        </div>
 
         <iqser-circle-button
             (action)="disableSelection()"

src/lib/listing/workflow/column-header/column-header.component.ts

@@ -1,9 +1,20 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    TemplateRef,
+    ViewChild,
+} from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, map, tap } from 'rxjs/operators';
 import { CircleButtonTypes } from '../../../buttons';
 import { IListable } from '../../models';
-import { AutoUnsubscribe, Required } from '../../../utils';
+import { AutoUnsubscribe, Debounce, Required } from '../../../utils';
 import { WorkflowColumn } from '../workflow.component';
 import { ListingService } from '../../services';
 
@@ -24,7 +35,11 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     allSelected$!: Observable<boolean>;
     indeterminate$!: Observable<boolean>;
 
-    constructor(readonly listingService: ListingService<T>) {
+    bulkActionsContainerWidth?: number;
+
+    @ViewChild('bulkActionsContainer') bulkActionsContainer?: ElementRef;
+
+    constructor(readonly listingService: ListingService<T>, private readonly _changeRef: ChangeDetectorRef) {
         super();
     }
 
@@ -58,6 +73,9 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     enableSelection(): void {
         this.selectionColumn = this.column;
         this.selectionColumnChange.emit(this.selectionColumn);
+        setTimeout(() => {
+            this._setupResizeObserver();
+        }, 0);
     }
 
     disableSelection(): void {
@@ -75,4 +93,18 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     selectNone(): void {
         this.listingService.setSelected([]);
     }
+
+    @Debounce(30)
+    private _updateBulkActionsContainerWidth(entry: ResizeObserverEntry): void {
+        this.bulkActionsContainerWidth = entry.contentRect.width;
+        this._changeRef.markForCheck();
+    }
+
+    private _setupResizeObserver(): void {
+        const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this._updateBulkActionsContainerWidth(entries[0]);
+        });
+
+        observer.observe(this.bulkActionsContainer?.nativeElement);
+    }
 }

src/lib/listing/workflow/workflow.component.scss

@@ -80,6 +80,7 @@
 
     &.disabled {
         background-color: var(--iqser-grey-6);
+        border-color: var(--iqser-grey-6);
         color: var(--iqser-disabled);
     }