From e27180a67cdb6fcdb914cfd177e89e62716a27c2 Mon Sep 17 00:00:00 2001
From: Matthieu <matthieu.perrin@montreal.ca>
Date: Wed, 2 Aug 2023 11:00:24 -0400
Subject: [PATCH] fix: set max-height for modal sizing

Signed-off-by: Matthieu <matthieu.perrin@montreal.ca>
---
 .../lib/modal/modal-container.component.scss  |  4 --
 .../lib/modal/modal-overlay.component.scss    |  3 +
 .../src/lib/modal/tests/modal.spec.ts         | 56 +++++++++++++++++++
 3 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/projects/angular-ui/src/lib/modal/modal-container.component.scss b/projects/angular-ui/src/lib/modal/modal-container.component.scss
index 12b930e5..c9f42b75 100644
--- a/projects/angular-ui/src/lib/modal/modal-container.component.scss
+++ b/projects/angular-ui/src/lib/modal/modal-container.component.scss
@@ -7,10 +7,6 @@
   display: block;
   overflow: auto;
 
-  // The dialog container should completely fill its parent overlay element.
-  width: 100%;
-  height: 100%;
-
   // Since the dialog won't stretch to fit the parent, if the height
   // isn't set, we have to inherit the min and max values explicitly.
   min-height: inherit;
diff --git a/projects/angular-ui/src/lib/modal/modal-overlay.component.scss b/projects/angular-ui/src/lib/modal/modal-overlay.component.scss
index 82390ca2..775b5926 100644
--- a/projects/angular-ui/src/lib/modal/modal-overlay.component.scss
+++ b/projects/angular-ui/src/lib/modal/modal-overlay.component.scss
@@ -84,6 +84,7 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       &.bao-modal-sm {
         width: 500px;
         height: auto;
+        max-height: calc(100% - 4rem);
       }
     }
 
@@ -98,10 +99,12 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
       &.bao-modal-md {
         width: 800px;
         height: auto;
+        max-height: calc(100% - 4rem);
       }
       &.bao-modal-sm {
         width: 500px;
         height: auto;
+        max-height: calc(100% - 4rem);
       }
     }
   }
diff --git a/projects/angular-ui/src/lib/modal/tests/modal.spec.ts b/projects/angular-ui/src/lib/modal/tests/modal.spec.ts
index 3723b210..81571c94 100644
--- a/projects/angular-ui/src/lib/modal/tests/modal.spec.ts
+++ b/projects/angular-ui/src/lib/modal/tests/modal.spec.ts
@@ -61,6 +61,24 @@ class AddressComponent {
   ) {}
 }
 
+@Component({
+  template:
+    " \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> \
+"
+})
+class LongTextComponent {
+  constructor(
+    public modalRef: BaoModalRef<LongTextComponent>,
+    public modalInjector: Injector
+  ) {}
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -134,6 +152,44 @@ describe('BaoModalComponent', () => {
       ).toBeNull();
     }));
 
+    it('Should adjust to content length', () => {
+      const modalRef = modal.open(AddressComponent, {
+        size: eModalDesktopWidthSize.SMALL
+      });
+
+      viewContainerFixture.detectChanges();
+      const smallOverlay =
+        overlayContainerElement.querySelector('.cdk-overlay-pane');
+      const smallContentHeight = smallOverlay.clientHeight;
+
+      modalRef.close();
+
+      viewContainerFixture.detectChanges();
+      modal.open(LongTextComponent, {
+        size: eModalDesktopWidthSize.SMALL
+      });
+
+      viewContainerFixture.detectChanges();
+      const longOverlay =
+        overlayContainerElement.querySelector('.cdk-overlay-pane');
+      const longContentHeight = longOverlay.clientHeight;
+
+      expect(smallContentHeight).toBeLessThan(longContentHeight);
+    });
+
+    it('Should not exceed viewport height', () => {
+      modal.open(LongTextComponent, {
+        size: eModalDesktopWidthSize.SMALL
+      });
+
+      viewContainerFixture.detectChanges();
+      const overlay =
+        overlayContainerElement.querySelector('.cdk-overlay-pane');
+      const longContentHeight = overlay.clientHeight;
+
+      expect(longContentHeight).toBeLessThanOrEqual(window.innerHeight);
+    });
+
     it('should use the default value (small on desktop and fullwidth on mobile)', () => {
       modal.open(AddressComponent);