From 80657c3b58a1879c55b5a64615ef5e944088336a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Wed, 29 Nov 2023 13:18:13 +0100
Subject: [PATCH 1/2] Supports mobile for Stoplight

---
 src/features/docs/view/Stoplight.tsx | 34 +++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/features/docs/view/Stoplight.tsx b/src/features/docs/view/Stoplight.tsx
index 7e0dd80b..0e7cf9c1 100644
--- a/src/features/docs/view/Stoplight.tsx
+++ b/src/features/docs/view/Stoplight.tsx
@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react"
+import { Box } from "@mui/material"
 import { API } from "@stoplight/elements"
 import "@stoplight/elements/styles.min.css"
 import LoadingWrapper from "./LoadingWrapper"
 
-const Swagger = ({ url }: { url: string }) => {
+const Stoplight = ({ url }: { url: string }) => {
   // The Stoplight component does not provide a callback to let us know
   // when loading ends so in order to show our loading indicator, we load
   // the specification before showing the Stoplight component.
@@ -20,10 +21,37 @@ const Swagger = ({ url }: { url: string }) => {
   return (
     <LoadingWrapper showLoadingIndicator={isLoading}>
       {!isLoading && document &&
-        <API apiDescriptionDocument={document} router="hash" />
+        <ResponsiveStoplight document={document} />
       }
     </LoadingWrapper>
   )
 }
 
-export default Swagger
+const ResponsiveStoplight = ({ document }: { document: string }) => {
+  
+  return (
+    <>
+      <Box sx={{
+        display: { xs: "block", sm: "none" },
+        padding: 2 
+      }}>
+        <API
+          apiDescriptionDocument={document}
+          router="hash"
+          layout="stacked"
+        />
+      </Box>
+      <Box sx={{
+        display: { xs: "none", sm: "block" }
+      }}>
+        <API
+          apiDescriptionDocument={document}
+          router="hash"
+          layout="sidebar"
+        />
+      </Box>
+    </>
+  )
+} 
+
+export default Stoplight

From 4dde83862ab38f45240fcb190da8b492cad3cfab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20St=C3=B8vring?= <mail@simonbs.dk>
Date: Wed, 29 Nov 2023 13:20:29 +0100
Subject: [PATCH 2/2] Fixes sizing of Stoplight viewer

---
 src/features/docs/view/Stoplight.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/features/docs/view/Stoplight.tsx b/src/features/docs/view/Stoplight.tsx
index 0e7cf9c1..9263e677 100644
--- a/src/features/docs/view/Stoplight.tsx
+++ b/src/features/docs/view/Stoplight.tsx
@@ -28,11 +28,12 @@ const Stoplight = ({ url }: { url: string }) => {
 }
 
 const ResponsiveStoplight = ({ document }: { document: string }) => {
-  
   return (
     <>
       <Box sx={{
         display: { xs: "block", sm: "none" },
+        width: "100%",
+        height: "100%",
         padding: 2 
       }}>
         <API
@@ -42,7 +43,9 @@ const ResponsiveStoplight = ({ document }: { document: string }) => {
         />
       </Box>
       <Box sx={{
-        display: { xs: "none", sm: "block" }
+        display: { xs: "none", sm: "block" },
+        width: "100%",
+        height: "100%",
       }}>
         <API
           apiDescriptionDocument={document}