Redocly: Fix regrid layout

Author: nginx-jack

assets/css/v2/style.css

@@ -395,6 +395,12 @@ ol li:last-child {
   justify-self: center;
   padding: var(--space-s);
   max-width: var(--content-max-width);
+
+  /* Allow redocly to fill the entire container */
+  &.content__redocly {
+    justify-self: unset;
+    max-width: unset;
+  }
 }
 
 .footer {
@@ -844,23 +850,6 @@ nav {
   grid-template-rows: calc(70px + var(--flow-gap)) max-content;
 }
 
-.api {
-  margin: 0 0 1rem 1rem;
-  .row {
-    display: grid !important;
-  }
-
-  .nginx-docs-api-container {
-    grid-column: 1 / -1;
-    max-width: 100% !important;
-    margin-top: 2rem;
-  }
-
-  .content-layout {
-    grid-template-columns: 1fr var(--side-gutter-width);
-  }
-}
-
 /* MARK: Coveo
 */
 #search-v2 {

layouts/redoc/single.html

@@ -1,92 +1,32 @@
 {{ 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);
-    }
-  }
+<div class="grid-container">
+    <aside class="sidebar">
+        {{ partial "sidebar-v2.html" . }}
+    </aside>
 
-  html {
-    scroll-behavior: auto !important;
-  }
+    <header class="header">
+        {{ block "header" . }}{{end}}
+    </header>
 
-  .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">
-    <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);
-    "
-  >
-    <section class="breadcrumb-layout">
-      {{ if not .IsHome }}
-        {{ if not (in .Params.display_breadcrumb "false" ) }}
-        {{ partial "breadcrumb" .}}  
+
+    <main class="content content__redocly">
+   
+        <div id="api-component">{{ .Content}}</div>
+    </main>
+
+    <footer class="footer">
+        {{ block "footer-v2" . }}
+        {{ partial "footer-v2.html" . }}
         {{ end }}
-      {{ end }}
-    </section>
-    <div class="nginx-docs-api-container">
-      <div id="api-component">{{ .Content}}</div>
-    </div>
-  </section>
-  </div>
+    </footer>
+
+    <!-- If there is a script defined in the page metadata, load it  -->
+    {{if .Params.script}}
+      {{ $script := (delimit (slice "scripts" .Params.script) "/")}}
+      {{ partial (string $script) .}}
+    {{end }}
+
+</div>
 {{ end }}