[Modal / Dialog] Problem with displaying the header (generally the top part) when they are larger than the window height OOTB + unexpected scroll to top while clicking somewhere

[Pucek9]

Describe the bug Dialogs are not displayed correctly when their height is large, relative to the screen

Tell us the version of Spartacus

• Library version: 6.7

To Reproduce Steps to reproduce the behavior:

1. Go to https://spartacus-demo.eastus.cloudapp.azure.com/electronics-spa/en/USD/Open-Catalogue/Cameras/Digital-Cameras/c/575
2. Click on 'add to cart' for any product
3. Click F12, adjust browser window size
4. You can see that part of the header cannot be seen, even if the scroll position is already maxed out.

Expected behavior Scroll behavior should allow to display whole content, the top of the modal as well

Screenshots

Desktop (please complete the following information):

• OS: Windows 11

Additional context: It's not only about this specified modal, but generally. The bottom part is displayed fine:

Possible workaround to apply only for very high modals (better to get a general solution)

.cx-modal-container {
  display: table;
  margin: 1.75rem auto;
}

[Pucek9]

An additional, related issue we observed, is that on a huge modal with turned-on autofocus, if you scroll down and click somewhere on it (which is not an interactive element, like a button) it will cause a scroll to top.

Steps to reproduce: the same as above, but after scrolling somewhere lower, click on empty space on the modal.

Result: Modal is scrolled to the top

Expected result: no action

Possible workaround:

1. turn off autofocus in cxFocus config
2. add #focus into the element, you want to be focused
3. handle it this way, for example:

  @ViewChild('focus') focusElement: ElementRef;
  ngAfterViewInit(): void {
    this.focusElement.nativeElement.focus();
  }