expand modal

packages/app/src/components/PagePresentationModal.module.scss

@@ -1,4 +1,14 @@
+@use '~/styles/_modal';
+
 .grw-presentation-modal :global {
+
+  @include modal.expand-modal-fullscreen(false, false, 0px);
+
+  .modal-content {
+    background-color: transparent;
+    border-radius: 0;
+  }
+
   .close {
     position: absolute;
     top: 1rem;
@@ -14,11 +24,4 @@
     }
   }
 
-  .modal-body {
-    padding: 0;
-  }
-  .modal-content {
-    background-color: transparent;
-    border-radius: 0;
-  }
 }

packages/app/src/components/PagePresentationModal.tsx

@@ -34,7 +34,7 @@ const PagePresentationModal = (): JSX.Element => {
       isOpen={isOpen}
       toggle={closePresentationModal}
       data-testid="page-presentation-modal"
-      className={`grw-presentation-modal ${styles['grw-presentation-modal']} grw-body-only-modal-expanded`}
+      className={`grw-presentation-modal ${styles['grw-presentation-modal']}`}
       unmountOnClose={false}
     >
       <button className="close" type="button" aria-label="close" onClick={closePresentationModal}>

packages/app/src/styles/_modal.scss

@@ -1,12 +1,15 @@
-@mixin expand-modal-fullscreen($hasModalHeader: true, $hasModalFooter: true) {
+@mixin expand-modal-fullscreen($hasModalHeader: true, $hasModalFooter: true, $margin: 1rem) {
   // full-screen modal
   width: auto;
   max-width: unset !important;
-  height: calc(100vh - 30px);
-  margin: 15px !important;
+  height: calc(100vh - $margin * 2);
+  margin: $margin !important;
 
   .modal-content {
-    height: calc(100vh - 30px);
+    height: calc(100vh - $margin * 2);
+  }
+  .modal-body {
+    padding: $margin;
   }
 
   // expand .modal-body (with calculating height)
@@ -14,14 +17,14 @@
     $modal-header: 54px;
     $modal-footer: 46px;
 
-    $margin: 0px;
+    $margin-body: 0px;
     @if $hasModalHeader {
-      $margin: $margin + $modal-header;
+      $margin-body: $margin-body + $modal-header;
     }
     @if $hasModalFooter {
-      $margin: $margin + $modal-footer;
+      $margin-body: $margin-body + $modal-footer;
     }
-    height: calc(100% - #{$margin});
+    height: calc(100% - #{$margin-body});
   }
 }