fix: Loading of API docs

src/pages/web-check-api/spec.astro

@@ -1,9 +1,7 @@
 ---
 import BaseLayout from '@layouts/Base.astro';
 import NavBar from '@components/scafold/Nav.astro';
-// import Footer from '@components/scafold/Footer.astro';
-// import config from '../site-config';
-
+import Footer from '@components/scafold/Footer.astro';
 ---
 
 <BaseLayout
@@ -17,12 +15,13 @@ import NavBar from '@components/scafold/Nav.astro';
   <main>
     <NavBar />
     <div id="swagger-ui"></div>
+    <Footer />
   </main>
 </BaseLayout>
 
 <script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/4.1.3/swagger-ui-bundle.js"></script>
-<script type="module" is:inline>
-  window.onload = () => {
+<script is:inline>
+  function initializeSwagger() {
     SwaggerUIBundle({
       url: '/resources/openapi-spec.yml',
       dom_id: '#swagger-ui',
@@ -33,19 +32,24 @@ import NavBar from '@components/scafold/Nav.astro';
       ],
     });
   }
+  // Initialize Swagger when visiting page directly
+  document.addEventListener('DOMContentLoaded', initializeSwagger);
+  // Initialize Swagger when navigating to page from another page
+  if (document.readyState === 'complete' || document.readyState === 'interactive') {
+    initializeSwagger();
+  }
 </script>
 
 <style lang="scss">
   @import '@styles/global.scss';
   main {
-    padding: 2rem;
-    margin: 0 auto;
     height: 100vh;
-    width: 100vw;
-    max-width: 1600px;
-    @include mobile-down {
-      padding: 0;
+    padding-top: 2rem;
+    #swagger-ui {
+      margin: 0 auto;
+      width: calc(100vw - 4rem);
+      max-width: 1600px;
+      min-height: 100vh;
     }
   }
-
 </style>