[UI Enhancement] ApiDemoPanel: Expand modal cleanup (#566)

* Remove inline styling and fix content blurriness

* Use flexbox positioning to correct modal blurriness

* Set modal width and height based on viewport

Author: blindaa121

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/Container/_Container.scss

@@ -1,4 +1,5 @@
 .openapi-demo__code-block-container {
+  height: 100%;
   background: var(--prism-background-color);
   color: var(--prism-color);
   margin-bottom: unset;

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/Content/_Content.scss

@@ -1,4 +1,5 @@
 .openapi-demo__code-block-content {
+  height: 100%;
   position: relative;
   /* rtl:ignore */
   direction: ltr;
@@ -15,6 +16,7 @@
 }
 
 .openapi-demo__code-block {
+  height: 100%;
   border-radius: var(--ifm-global-radius);
   --ifm-pre-background: var(--prism-background-color);
   margin: 0;

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/_ExpandButton.scss

@@ -1,3 +1,23 @@
+.openapi-demo__expand-modal-content {
+  padding: none;
+  border: thin solid var(--ifm-toc-border-color);
+  border-radius: var(--ifm-global-radius);
+  max-width: 95%;
+  width: 65vw;
+  height: 65vh;
+  overflow: auto;
+}
+
+.openapi-demo__expand-modal-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0px;
+  background-color: rgba(0, 0, 0, 0.9);
+  z-index: 201;
+}
+
 .theme-code-block:hover .openapi-demo__code-block-expand-btn--copied {
   opacity: 1 !important;
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiDemoPanel/ApiCodeBlock/ExpandButton/index.js

@@ -38,22 +38,6 @@ export default function ExpandButton({
 
   const [modalIsOpen, setIsOpen] = React.useState(false);
 
-  const customStyles = {
-    overlay: { backgroundColor: "rgba(0, 0, 0, 0.9)", zIndex: "201" },
-    content: {
-      top: "50%",
-      left: "50%",
-      right: "auto",
-      bottom: "auto",
-      padding: "none",
-      border: "thin solid var(--ifm-toc-border-color)",
-      borderRadius: "var(--ifm-global-radius)",
-      transform: "translate(-50%, -50%)",
-      maxWidth: "95%",
-      width: "min-content",
-      overflow: "auto",
-    },
-  };
   useEffect(() => {
     Modal.setAppElement("body");
   });
@@ -107,9 +91,10 @@ export default function ExpandButton({
         </span>
       </button>
       <Modal
+        className="openapi-demo__expand-modal-content"
+        overlayClassName="openapi-demo__expand-modal-overlay"
         isOpen={modalIsOpen}
         onRequestClose={closeModal}
-        style={customStyles}
         contentLabel="Code Snippet"
       >
         <Container