refactor(design): rework modal styles

libs/design/modal/src/modal-content/modal-content.component.ts

@@ -7,7 +7,6 @@ import {
 @Component({
   selector: 'daff-modal-content',
   template: '<ng-content></ng-content>',
-  styleUrls: ['./modal-content.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DaffModalContentComponent {

libs/design/modal/src/modal-header/modal-header.component.ts

@@ -10,7 +10,6 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons';
 @Component({
   selector: 'daff-modal-header',
   templateUrl: './modal-header.component.html',
-  styleUrls: ['./modal-header.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

libs/design/modal/src/modal/modal.component.scss

@@ -1,15 +1,67 @@
+@use '../../../scss/typography' as t;
 @use '../../../scss/layout';
 
-:host {
-	display: block;
+.daff-modal {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
 	border-radius: 4px;
-	height: 100%;
-	max-width: 80vw;
+	max-height: 90vh;
+	max-width: 90vw;
 	overflow: hidden;
-	padding: 24px;
 	z-index: 3;
 
 	@include layout.breakpoint(mobile) {
-		height: auto;
+		max-height: 80vh;
+		max-width: 80vw;
+	}
+}
+
+.daff-modal-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 24px;
+	position: relative;
+
+	.daff-modal-title {
+		@include t.text-truncate();
+		font-size: 1.25rem;
+		font-weight: 500;
+		line-height: 1.5rem;
+		margin: 0;
+		padding: 0 32px 0 0;
 	}
+
+	&__dismiss-button {
+		position: absolute;
+		right: 7px;
+		top: 12px;
+	}
+}
+
+
+.daff-modal-content {
+	display: block;
+	flex-grow: 1;
+	max-height: 60vh;
+	overflow-y: auto;
+	padding: 24px;
+}
+
+.daff-modal-actions {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 24px;
 }
+
+.daff-modal-content + .daff-modal-actions {
+	padding: 0 24px 24px;
+}
+
+.daff-modal-header + .daff-modal-content {
+	padding-top: 0;
+}

libs/design/modal/src/modal/modal.component.ts

@@ -18,7 +18,7 @@ import {
   ElementRef,
   AfterContentInit,
   AfterViewInit,
-  Self,
+  ViewEncapsulation,
 } from '@angular/core';
 
 import { daffFocusableElementsSelector } from '@daffodil/design';
@@ -33,6 +33,7 @@ import { DaffModalService } from '../service/modal.service';
   styleUrls: ['./modal.component.scss'],
   animations: [daffFadeAnimations.fade],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
 })
 export class DaffModalComponent implements AfterContentInit, AfterViewInit {
   /**
@@ -127,7 +128,16 @@ export class DaffModalComponent implements AfterContentInit, AfterViewInit {
    * Helper method to attach portable content to modal.
    */
   attachContent(portal: ComponentPortal<any>): any {
-	  this._portalOutlet.attachComponentPortal(portal);
+    const attachContent = this._portalOutlet.attachComponentPortal(portal);
+
+    // When a component is created to inject content into the modal, it can
+    // interfere with the display styles applied to the modal's header, content,
+    // and action sections. By setting `display: contents;` on the custom
+    // component, it is visually removed from the UI, allowing the content
+    // within it to inherit the modal's styles.
+    attachContent.location.nativeElement.style.display = 'contents';
+
+    return attachContent;
   }
 
   /** Animation hook that controls the entrance and exit animations of the modal. */