fix: make LTI modals full-screen (#268)

Fixes TNL-7410

This causes LTI modals in courseware to take up the whole screen.  It does this by creating a new “dialogClassName” value that we then use to override the default heights/widths of the Bootstrap modal.

We also remove the title of the iframe, which just takes up space and detracts from the LTI content.

src/courseware/course/sequence/Unit.jsx

@@ -147,14 +147,17 @@ function Unit({
                     allow="microphone *; camera *; midi *; geolocation *; encrypted-media *"
                     frameBorder="0"
                     src={modalOptions.url}
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                    }}
                   />
                 )}
             </>
           )}
-          title={modalOptions.title}
           onClose={() => { setModalOptions({ open: false }); }}
           open
-          dialogClassName="modal-lg"
+          dialogClassName="modal-lti"
         />
       )}
       <div className="unit-iframe-wrapper">

src/index.scss

@@ -319,6 +319,27 @@ $primary: #1176B2;
   }
 }
 
+// This class forces any modals using 'modal-lti' as their dialogClassName to take up the whole
+// window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
+// size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
+.modal-lti {
+  height: 100%;
+  max-width: 100%;
+
+  // I don't like this.  We need to set a height of 100% on a div created by react-focus-on, a
+  // package we use in our Modal.  That div has no class name or ID, so instead we're uniquely
+  // identifying it by based on a unique attribute it has which its siblings don't share.
+  > div[data-focus-lock-disabled=false] {
+    height: 100%;
+  }
+
+  // Along with setting the height of modal-content's parent div from react-focus-on, we need to
+  // set modal-content's height as well to get the modal to expand to full-screen height.
+  .modal-content {
+    height: 100%;
+  }
+}
+
 // Import component-specific sass files
 @import 'courseware/course/celebration/CelebrationModal.scss';
 @import 'courseware/course/content-tools/calculator/calculator.scss';