From 3ab943e4fdde9e0b6e37964618fc445c9c602b6c Mon Sep 17 00:00:00 2001 From: Joy Serquina Date: Fri, 5 Jan 2024 19:53:16 +0000 Subject: [PATCH] fix(material/dialog): dialog actions overflow and are unreachable Fixes a bug in the Angular Material dialog component where buttons/actions are unreachable due to dialog overflowing because of unspecified max-height for the mat-dialog-container parent flexbox. Fixes #24785 --- src/material/dialog/dialog.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/material/dialog/dialog.scss b/src/material/dialog/dialog.scss index 1544cbc1512c..f5542ec11db5 100644 --- a/src/material/dialog/dialog.scss +++ b/src/material/dialog/dialog.scss @@ -10,6 +10,9 @@ $mat-dialog-content-max-height: 65vh !default; // Dialog button horizontal margin. This has been extracted from MDC as they // don't expose this value as variable. $mat-dialog-button-horizontal-margin: 8px !default; +// Dialog container max height. This has been given a default value so the +// flex-children can be calculated and not overflow on smaller screens. +$mat-dialog-container-max-height: 95vh !default; // Note that we disable fallback declarations, but we don't disable fallback // values, because there are a lot of internal apps that don't include a proper @@ -32,6 +35,8 @@ $mat-dialog-button-horizontal-margin: 8px !default; // The dialog container is focusable. We remove the default outline shown in browsers. outline: 0; + max-height: $mat-dialog-container-max-height; + .mdc-dialog__container { transition-duration: var(--mat-dialog-transition-duration, 0ms); }