fix(docs): act-1451 - fixes for drawer position

MetaMask · Jul 1, 2024 · ac40ea4 · ac40ea4
1 parent 20b69c6
commit ac40ea4
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 22 deletions.
diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
@@ -1,15 +1,14 @@
 .modalContainer {
-  max-width: 792px;
-  width: 100%;
   border: 1px solid #848C96;
   border-radius: 8px 8px 0 0;
-  position: fixed;
+  position: absolute;
   z-index: 10;
   top: 100%;
-  left: 50%;
+  left: 15px;
+  right: 15px;
   min-height: 512px;
   opacity: 0;
-  transform: translate(-50%, 100%);
+  transform: translate(0, 100%);
   transition-property: 'transform', 'opacity';
   transition-duration: .4s;
   transition-timing-function: ease;
@@ -20,7 +19,7 @@
 
 .modalContainerOpen {
   opacity: 1;
-  transform: translate(-50%, -100%);
+  transform: translate(0, -100%);
 }
 
 .modalHeader {
@@ -56,3 +55,11 @@
   height: 394px;
   overflow-y: auto;
 }
+
+@media (width <= 1200px) {
+  .modalContainer {
+    position: fixed;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/components/ParserOpenRPC/global.module.css b/src/components/ParserOpenRPC/global.module.css
@@ -55,13 +55,20 @@
 .rowWrap {
   display: flex;
   flex-wrap: wrap;
-  padding: 0 30px;
+  padding: 0 30px 0 0;
 }
 
 .colLeft {
+  position: relative;
   width: 65%;
-  padding-right: 23px;
   border-right: 1px solid #444950;
+  overflow: hidden;
+}
+
+.colContentWrap {
+  height: calc(100vh - 84px);
+  padding: 0 30px;
+  overflow-y: auto;
 }
 
 .colRight {
@@ -79,10 +86,11 @@
     width: 100%;
     padding: 0;
   }
-}
-
-@media (width <= 1024px) {
+  .colContentWrap {
+    height: auto;
+    padding: 0;
+  }
   .rowWrap {
     padding: 0;
   }
-}
+}
diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
@@ -86,15 +86,17 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
   return (
     <div className={global.rowWrap}>
       <div className={global.colLeft}>
-        <DetailsBox
-          method={method}
-          description={currentMethodData.description}
-          params={currentMethodData.params}
-          components={currentMethodData.components.schemas}
-          result={currentMethodData.result}
-          tags={currentMethodData.tags}
-        />
-        <ErrorsBox errors={currentMethodData.errors} />
+        <div className={global.colContentWrap}>
+          <DetailsBox
+            method={method}
+            description={currentMethodData.description}
+            params={currentMethodData.params}
+            components={currentMethodData.components.schemas}
+            result={currentMethodData.result}
+            tags={currentMethodData.tags}
+          />
+          <ErrorsBox errors={currentMethodData.errors} />
+        </div>
         <ModalDrawer
           title="Customize request"
           isOpen={isModalOpen}

diff --git a/src/css/custom.css b/src/css/custom.css
@@ -291,4 +291,9 @@ html[data-theme="light"] .api-card:hover {
 
 .transition-300 {
   transition: all 0.3s;
+}
+
+fieldset {
+  border: 0;
+  padding: 0;
 }
diff --git a/wallet/reference/new-reference.mdx b/wallet/reference/new-reference.mdx
@@ -8,4 +8,4 @@ sidebar_class_name: "hidden"
 import ParserOpenRPC from "@site/src/components/ParserOpenRPC";
 import { NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
 
-<ParserOpenRPC network={NETWORK_NAMES.metamask} method="eth_subscribe" />
+<ParserOpenRPC network={NETWORK_NAMES.metamask} method="eth_call" />