Merge pull request #939 from primer/box-overlay-example

Fix Box--overlay example

Author: shawnbot

docs/content/components/box-overlay.md

@@ -12,15 +12,15 @@ Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://git
 
 Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
 
-**Note:** `position: fixed` has been disabled in this example
+```html live
 
-```erb
 <details class="details-reset details-overlay details-overlay-dark">
   <summary class="btn" aria-haspopup="dialog">Open dialog</summary>
   <details-dialog class="Box Box--overlay d-flex flex-column anim-fade-in fast">
     <div class="Box-header">
       <button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
-        <%= octicon "x" %>
+        <!-- <%= octicon "x" %> -->
+        <svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
       </button>
       <h3 class="Box-title">Box title</h3>
     </div>
@@ -50,6 +50,10 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
     </div>
   </details-dialog>
 </details>
+
+<!-- Temporary overrides (don't use in production) -->
+<style> .frame-example { min-height: 500px; } </style>
+<link href="https://unpkg.com/@github/details-dialog-element/index.css" rel="stylesheet" />
 ```
 
 In github.com there is a shared dialog partial. You will only have to pass in the modal content:

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -7,7 +7,7 @@ function LivePreviewWrapper({children}) {
     <Frame>
       <link rel="stylesheet" href="https://github.com/site/assets/styleguide.css" />
       <style>{primerStyles}</style>
-      <div className="p-3">{children}</div>
+      <div className="frame-example p-3">{children}</div>
     </Frame>
   )
 }