update media modal style

src/app/components/ScrollLock.tsx

@@ -21,7 +21,7 @@ const ScrollLockBodyClass = createGlobalStyle`
       `)}
     `}
 
-    ${(props: {mediumScreensOnly?: boolean}) => props.mediumScreensOnly === false && css`
+    ${(props: {mediumScreensOnly?: boolean}) => !props.mediumScreensOnly && css`
       @media print {
         #root {
           display: none;

src/app/content/components/Page/MediaModal.tsx

@@ -1,60 +1,48 @@
 import React from 'react';
 import styled from 'styled-components/macro';
 import ScrollLock from '../../../components/ScrollLock';
+import theme from '../../../theme';
 
-// tslint:disable-next-line:variable-name
-const Overlay = styled.div`
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.9);
-  z-index: 1000;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+const buttonHeight = 4.2; // rem
+const buttonMargin = 0.5; // rem
 
 // tslint:disable-next-line:variable-name
-const Modal = styled.div`
+const ScrollableContent = styled.div`
   background: white;
-  width: 100%;
-  min-width: 100vw;
-  max-height: 90vh;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  overflow: hidden;
+  max-width: 100vw;
+  max-height: calc(100vh - ${(buttonHeight + buttonMargin * 2) * 2}rem);
+  overflow: auto;
 `;
 
-// tslint:disable-next-line:variable-name
-const ScrollableContent = styled.div`
-  overflow-y: auto;
-  display: block;
-  width: 100%;
-  box-sizing: border-box;
-`;
 
 // tslint:disable-next-line:variable-name
 const FloatingCloseButton = styled.button`
   position: absolute;
-  top: -3rem;
-  right: 2.5rem;
+  top: -${buttonHeight + buttonMargin}rem;
+  right: ${buttonMargin}rem;
   z-index: 10;
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
-  width: 2.5rem;
-  height: 2.5rem;
-  transform: translateY(-3rem);
+  width: ${buttonHeight}rem;
+  height: ${buttonHeight}rem;
 `;
 
 // tslint:disable-next-line:variable-name
-const ModalWrapper = styled.div`
+const ContentContainer = styled.div`
   position: relative;
-  max-width: 100vw;
-  width: 100%;
-  box-sizing: border-box;
+`;
+
+// tslint:disable-next-line:variable-name
+const ModalWrapper = styled.div`
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  z-index: ${theme.zIndex.highlightSummaryPopup + 1};
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
 
 
@@ -78,17 +66,19 @@ const MediaModal: React.FC<MediaModalProps> = ({ isOpen, onClose, children }) =>
 
   return (
     <>
-      <ScrollLock onClick={onClose} overlay={true} />
-      <Overlay onClick={onClose}>
-        <ModalWrapper aria-modal='true'>
+      <ScrollLock
+        onClick={onClose}
+        overlay={true}
+        zIndex={theme.zIndex.highlightSummaryPopup}
+      />
+      <ModalWrapper aria-modal='true'>
+        <ContentContainer>
           <FloatingCloseButton onClick={onClose} aria-label='Close media preview'>
             <CloseIcon />
           </FloatingCloseButton>
-          <Modal>
-            <ScrollableContent>{children}</ScrollableContent>
-          </Modal>
-        </ModalWrapper>
-      </Overlay>
+          <ScrollableContent>{children}</ScrollableContent>
+        </ContentContainer>
+      </ModalWrapper>
     </>
   );
 };

src/app/content/components/Page/PageComponent.tsx

@@ -1,4 +1,4 @@
-import { HTMLAnchorElement, HTMLDivElement, HTMLElement, MouseEvent, KeyboardEvent } from '@openstax/types/lib.dom';
+import { HTMLAnchorElement, HTMLImageElement, HTMLDivElement, HTMLElement, MouseEvent, KeyboardEvent } from '@openstax/types/lib.dom';
 import React, { Component } from 'react';
 import WeakMap from 'weak-map';
 import { APP_ENV } from '../../../../config';
@@ -210,13 +210,10 @@ export default class PageComponent extends Component<PagePropTypes> {
     const container = this.container.current;
     if (!container) return;
 
-    const triggerMediaModal = (target: HTMLElement) => {
-      if (typeof window !== 'undefined' && window.matchMedia(`(max-width: 1200px)`).matches) {
-        const outerHTML = target.outerHTML;
-        mediaModalManager.open(
-          <div dangerouslySetInnerHTML={{ __html: outerHTML }} />
-        );
-      }
+    const triggerMediaModal = (target: HTMLImageElement) => {
+      mediaModalManager.open(
+        <img src={target.src} alt={target.alt || ''} width={target.width} height={target.height} />
+      );
     };
 
     const handleInteraction = (e: MouseEvent | KeyboardEvent) => {
@@ -232,7 +229,7 @@ export default class PageComponent extends Component<PagePropTypes> {
         keyEvent.preventDefault();
       }
 
-      triggerMediaModal(target);
+      triggerMediaModal(target as HTMLImageElement);
     };
 
     container.addEventListener('click', handleInteraction);

src/app/content/components/Page/contentDOMTransformations.ts

@@ -252,10 +252,6 @@ function moveFootnotes(document: Document, rootEl: HTMLElement, intl: IntlShape)
 }
 
 function enhanceImagesForAccessibility(rootEl: HTMLElement) {
-  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 1200;
-
-  if (!isMobile) return;
-
   rootEl.querySelectorAll('img').forEach((img) => {
     img.setAttribute('tabindex', '0');
     img.setAttribute('role', 'button');