Fixed issue with margins on API pages

assets/css/v2/style.css

@@ -688,15 +688,20 @@ nav {
 }
 
 .api {
-  margin: 2rem 0 2rem 2rem;
-  width: 100%;
+  margin: 0 0 1rem 1rem;
   .row {
     display: grid !important;
   }
 
+  .breadcrumb-layout {
+    width: auto;
+    margin-top: 2rem;
+  }
+
   .nginx-docs-api-container {
-    grid-column: 1 / -1 !important;
+    grid-column: 1 / -1;
     max-width: 100% !important;
+    margin-top: 2rem;
   }
 
   .content-layout {

exampleSite/content/test-product/redoc/_index.md

@@ -0,0 +1,6 @@
+---
+description: Redocly API usage
+title: Redocly
+weight: 300
+toc: true
+---

exampleSite/content/test-product/redoc/api-reference.md

@@ -0,0 +1,11 @@
+---
+description: How API's from redocly are rendered for an example book API
+title: API Reference
+weight: 200
+type: redoc
+tags:
+  - api
+doctypes:
+  - reference
+---
+{{< openapi spec="./api/example.json" >}}

exampleSite/static/api/example.json

@@ -0,0 +1,98 @@
+{
+    "openapi": "3.0.3",
+    "info": {
+      "title": "Simple Book API",
+      "version": "v1",
+      "description": "A simple API to manage books."
+    },
+    "paths": {
+      "/books": {
+        "get": {
+          "summary": "Get all books",
+          "responses": {
+            "200": {
+              "description": "List of books",
+              "content": {
+                "application/json": {
+                  "schema": {
+                    "type": "array",
+                    "items": {
+                      "$ref": "#/components/schemas/Book"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        },
+        "post": {
+          "summary": "Add a new book",
+          "requestBody": {
+            "required": true,
+            "content": {
+              "application/json": {
+                "schema": {
+                  "$ref": "#/components/schemas/Book"
+                }
+              }
+            }
+          },
+          "responses": {
+            "201": {
+              "description": "Book added"
+            }
+          }
+        }
+      },
+      "/books/{id}": {
+        "get": {
+          "summary": "Get a book by ID",
+          "parameters": [
+            {
+              "name": "id",
+              "in": "path",
+              "required": true,
+              "schema": {
+                "type": "string"
+              }
+            }
+          ],
+          "responses": {
+            "200": {
+              "description": "Book found",
+              "content": {
+                "application/json": {
+                  "schema": {
+                    "$ref": "#/components/schemas/Book"
+                  }
+                }
+              }
+            },
+            "404": {
+              "description": "Book not found"
+            }
+          }
+        }
+      }
+    },
+    "components": {
+      "schemas": {
+        "Book": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "string"
+            },
+            "title": {
+              "type": "string"
+            },
+            "author": {
+              "type": "string"
+            }
+          },
+          "required": ["id", "title", "author"]
+        }
+      }
+    }
+  }
+

layouts/redoc/single.html

@@ -0,0 +1,100 @@
+{{ define "main" }}
+
+<!-- Remove upon cleaning up old frame code -->
+<style>
+  .nginx-docs-api-container {
+    z-index: 0 !important;
+    max-width: calc(100% + 2.4rem);
+    margin-top: 2rem;
+  }
+
+  @media (min-width: 768px) {
+    .nginx-docs-api-container {
+      z-index: 0 !important;
+      max-width: calc(75% + 2.4rem);
+    }
+  }
+
+  html {
+    scroll-behavior: auto !important;
+  }
+
+  .menu-content {
+    top: 0 !important;
+    height: 100vh !important;
+  }
+  .bCOLCR {
+    background: #e6e6e6;
+  }
+  .fTsuzH {
+    background-color: #e6e6e6;
+  }
+  .fgRoXk {
+    background-color: #fafafa;
+  }
+  #api-component > api-container > redoc {
+    background-color: #e6e6e6;
+  }
+  div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH > div > h3 {
+    color: #000000;
+  }
+  div.sc-dvUynV.fgRoXk.redoc-wrap {
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .gKPxXE .collapser {
+    background-color: transparent !important;
+  }
+  div
+    > div.sc-jSFjdj.sc-gKAaRy.dYGhuI.fTsuzH
+    > div.sc-EZqKI.iONckA
+    > button:hover {
+    background-color: #003963;
+  }
+  div > div.sc-giAqHp.hIuvjA > button:hover {
+    color: #003963;
+  }
+  .nginx-docs-api-container button:hover {
+    background-color: rgb(237, 237, 237);
+  }
+  pre {
+    white-space: pre-wrap;
+  }
+</style>
+<!--Use wide page layout for the API reference pages-->
+<section class="main-layout api">
+  <div class="sidebar-layout" data-mf="true" style="display:none;">
+    <nav id="sidebar-v2" class="sidebar">
+      {{ partial "sidebar-v2.html" . }}
+    </nav>
+  </div>
+  <div
+    class="row flex-md-nowrap content-layout"
+    style="
+      position: relative;
+      flex-wrap: nowrap;
+      margin-right: 9px;
+      max-width: calc(100% + 9px);
+    "
+  >
+    <nav
+      id="sidebar"
+      class="sidenav overflow-auto col-md-3 d-none d-md-block d-print-none sidebar-toggle-hidden-width"
+      style="width: 25%; border-right: 1px solid #e6e6e6"
+      ;
+    >
+      {{ partial "sidebar.html" . }}
+    </nav>
+    <section class="breadcrumb-layout" data-mf="true" style="display: none;">
+      {{ if not .IsHome }}
+        {{ if not (in .Params.display_breadcrumb "false" ) }}
+        {{ partial "breadcrumb" .}}  
+        {{ end }}
+      {{ end }}
+    </section>
+    <div class="nginx-docs-api-container">
+      <div id="api-component">{{ .Content}}</div>
+    </div>
+  </section>
+  </div>
+{{ end }}