Improve MkDocs visual preview layout and fix preview rendering/shim issues - 2026-02-22 17:15:06

Author: mgarcia01752

docs/assets/stylesheets/extra.css

@@ -0,0 +1,36 @@
+/* Maximize horizontal space for visual preview pages in MkDocs Material. */
+
+/* Hide right-side TOC / secondary sidebar on all widths. */
+.md-sidebar--secondary,
+.md-sidebar[data-md-type="toc"],
+.md-nav--secondary {
+  display: none !important;
+}
+
+/* Remove any reserved margin/gutter for the TOC area. */
+.md-content,
+.md-content__inner {
+  margin-right: 0 !important;
+}
+
+/* Expand layout width for large screens. */
+@media screen and (min-width: 60em) {
+  .md-grid,
+  .md-main__inner,
+  .md-content__inner {
+    max-width: none !important;
+  }
+}
+
+/* On desktop, force two-column layout (left nav + content), no right TOC column. */
+@media screen and (min-width: 76.25em) {
+  .md-main__inner {
+    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) !important;
+  }
+}
+
+/* Make embedded previews use more vertical space by default on large screens. */
+.md-typeset iframe {
+  width: 100%;
+  min-height: 78vh;
+}

mkdocs.yml

@@ -29,6 +29,9 @@ markdown_extensions:
   - tables
   - fenced_code
 
+extra_css:
+  - assets/stylesheets/extra.css
+
 nav:
   - Home: index.md
   - Docs Index: docs-index.md

site/404.html

@@ -47,6 +47,8 @@
 
 
 
+      <link rel="stylesheet" href="/assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("/",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/assets/stylesheets/extra.css

@@ -0,0 +1,36 @@
+/* Maximize horizontal space for visual preview pages in MkDocs Material. */
+
+/* Hide right-side TOC / secondary sidebar on all widths. */
+.md-sidebar--secondary,
+.md-sidebar[data-md-type="toc"],
+.md-nav--secondary {
+  display: none !important;
+}
+
+/* Remove any reserved margin/gutter for the TOC area. */
+.md-content,
+.md-content__inner {
+  margin-right: 0 !important;
+}
+
+/* Expand layout width for large screens. */
+@media screen and (min-width: 60em) {
+  .md-grid,
+  .md-main__inner,
+  .md-content__inner {
+    max-width: none !important;
+  }
+}
+
+/* On desktop, force two-column layout (left nav + content), no right TOC column. */
+@media screen and (min-width: 76.25em) {
+  .md-main__inner {
+    grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr) !important;
+  }
+}
+
+/* Make embedded previews use more vertical space by default on large screens. */
+.md-typeset iframe {
+  width: 100%;
+  min-height: 78vh;
+}

site/docs-index/index.html

@@ -51,6 +51,8 @@
 
 
 
+      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/index.html

@@ -49,6 +49,8 @@
 
 
 
+      <link rel="stylesheet" href="assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/release/index.html

@@ -51,6 +51,8 @@
 
 
 
+      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/tools/index.html

@@ -51,6 +51,8 @@
 
 
 
+      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/user-guide/index.html

@@ -51,6 +51,8 @@
 
 
 
+      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
 
 

site/visual-mkdocs-plan/index.html

@@ -49,6 +49,8 @@
 
 
 
+      <link rel="stylesheet" href="../assets/stylesheets/extra.css">
+    
     <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>