Modal content overflows in Angular

[manuel-at-grollmus]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

If multiple action cards are added inside the modal content it overflows. Tested in Angular. This was supposedly fixed in #1035, but as of IX 5.1.1. i can reproduce it again.

What type of frontend framework are you seeing the problem on?

Angular (Standalone)

On which version of the frontend framework are you experiencing the issue?

Angular 21.2.17

Which version of iX do you use?

5.1.1.

Code to produce this issue.

import { Component, TemplateRef, ViewChild } from '@angular/core';
import { ModalService } from '@siemens/ix-angular';

@Component({
  selector: 'app-example',
  template: `
    <ix-button (click)="openModal()">Show modal</ix-button>

    <ng-template #customModal let-modal>
      <div>
        <ix-modal-header> Message headline </ix-modal-header>
        <ix-modal-content
          ><ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card>
          <ix-action-card
            icon="refresh"
            heading="Scan for new devices"
            subheading="Secondary text"
            variant="insight"
          ></ix-action-card
        ></ix-modal-content>
        <ix-modal-footer>
          <ix-button
            outline
            class="dismiss-modal"
            (click)="modal.dismiss('dismiss')"
          >
            Cancel
          </ix-button>
          <ix-button class="close-modal" (click)="modal.close('okay')">
            OK
          </ix-button>
        </ix-modal-footer>
      </div>
    </ng-template>
  `,
})
export default class Modal {
  @ViewChild('customModal', { read: TemplateRef })
  customModalRef!: TemplateRef<any>;

  constructor(private readonly modalService: ModalService) {}

  async openModal() {
    const instance = await this.modalService.open({
      content: this.customModalRef,
      data: 'Some data',
    });

    instance.onClose.on((a) => {
      console.log(a);
    });

    instance.htmlElement.addEventListener(
      'keydown',
      (keyboardEvent: KeyboardEvent) => {
        console.log(keyboardEvent.key);
      }
    );
  }
}

[kathrinschalber]

We created an internal issue EIX-185