Fix mobile css bug (#129)

Author: bourdakos1

packages/docusaurus-theme-openapi/src/theme/ApiItem/index.tsx

@@ -15,7 +15,7 @@ import clsx from "clsx";
 
 import styles from "./styles.module.css";
 
-let ApiDemoPanel = (_: { item: any }) => <div />;
+let ApiDemoPanel = (_: { item: any }) => <div style={{ marginTop: "3.5em" }} />;
 if (ExecutionEnvironment.canUseDOM) {
   ApiDemoPanel = require("@theme/ApiDemoPanel").default;
 }

packages/docusaurus-theme-openapi/src/theme/ApiPage/index.tsx

@@ -179,7 +179,7 @@ function ApiPage(props: Props): JSX.Element {
 
   // Override the current route path to the first page if it can't be found on the sidebar.
   const paths = getSidebarPaths({ currentApiRoute, apiMetadata });
-  if (!paths.includes(location.pathname)) {
+  if (!paths.find((path) => matchPath(location.pathname, path))) {
     currentApiRoute = {
       ...currentApiRoute,
       path: paths[0],

packages/docusaurus-theme-openapi/src/theme/ApiPage/styles.module.css

@@ -58,7 +58,8 @@ html[data-theme="dark"] {
   display: flex;
 }
 
-.apiPage {
+.apiPage,
+.apiMainContainer {
   display: flex;
   width: 100%;
 }