diff --git a/src/app/modules/modal-shell/modal-shell.component.html b/src/app/modules/modal-shell/modal-shell.component.html
index d93e5b74..5d07e62a 100644
--- a/src/app/modules/modal-shell/modal-shell.component.html
+++ b/src/app/modules/modal-shell/modal-shell.component.html
@@ -1,54 +1,61 @@
-
-
-
-
-
-
- Close
-
-
-
-
-
-
-
-
+
+
+
+
+
+
-
-
- {{modalBody.modalData}}
-
-
+
-
-
+
+
+ {{modalBody.modalData}}
+
+
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
+
+
diff --git a/src/app/modules/modal-shell/modal-shell.component.css b/src/app/modules/modal-shell/modal-shell.component.scss
similarity index 60%
rename from src/app/modules/modal-shell/modal-shell.component.css
rename to src/app/modules/modal-shell/modal-shell.component.scss
index ac1da129..595f07a1 100644
--- a/src/app/modules/modal-shell/modal-shell.component.css
+++ b/src/app/modules/modal-shell/modal-shell.component.scss
@@ -44,4 +44,25 @@ h1 {
.ds-c-dialog {
max-height: 100vh;
overflow-y:auto;
-}
\ No newline at end of file
+}
+
+.modal-header-content {
+ flex: 1;
+
+ ::ng-deep {
+ // Override to ensure the first element (which will likely be a header element) doesn't have the default space
+ // at the top, so that it aligns with the close button
+ :first-child {
+ margin-top: 0;
+ padding-top: 0;
+ }
+ }
+}
+
+.modal-header-close-button {
+ ::ng-deep {
+ button {
+ text-decoration: none;
+ }
+ }
+}
diff --git a/src/app/modules/modal-shell/modal-shell.component.ts b/src/app/modules/modal-shell/modal-shell.component.ts
index 8064872c..fa1e5d37 100644
--- a/src/app/modules/modal-shell/modal-shell.component.ts
+++ b/src/app/modules/modal-shell/modal-shell.component.ts
@@ -9,7 +9,7 @@ import {
@Component({
selector: 'app-modal-shell',
templateUrl: './modal-shell.component.html',
- styleUrls: ['./modal-shell.component.css']
+ styleUrls: ['./modal-shell.component.scss']
})
export class AppModalShellComponent {
@@ -56,4 +56,4 @@ export class AppModalShellComponent {
}
};
}
-}
\ No newline at end of file
+}