Fix cut off examples

docs/CodeExample.js

@@ -35,7 +35,7 @@ export default function CodeExample(props) {
     return (
       <LiveProvider {...liveProps}>
         <BorderBox {...rest}>
-          <BorderBox bg="white" p={3} border={0} borderBottom={1} borderRadius={0}>
+          <BorderBox bg="white" border={0} borderBottom={1} borderRadius={0}>
             <Frame>
               <LivePreview />
             </Frame>

docs/Frame.js

@@ -6,6 +6,7 @@ import {assetPrefix} from './utils'
 
 export default class Frame extends React.Component {
   static defaultProps = {
+    display: 'block',
     border: 0,
     borderRadius: 0,
     minHeight: 0,
@@ -40,7 +41,7 @@ export default class Frame extends React.Component {
     return (
       <Measure bounds onResize={rect => this.setHeight(rect.bounds.height)}>
         {({measureRef}) => (
-          <div ref={measureRef} style={{overflow: 'auto'}}>
+          <div ref={measureRef} className="p-3 overflow-auto">
             {children}
           </div>
         )}

pages/css/components/forms.md

@@ -205,7 +205,7 @@ Use the `.select-sm` class to resize both default and custom `<select>`s to matc
 Convey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class="form-group">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.
 
 ```html
-<form>
+<form class="pb-2">
   <dl class="form-group errored">
     <dt><label for="example-text-errored">Example Text</label></dt>
     <dd><input class="form-control" type="text" value="Example Value" id="example-text-errored" aria-describedby="form-error-text"></dd>

pages/css/components/labels.md

@@ -138,5 +138,3 @@ Counters can also be used in `Box` headers to indicate the number of items in a
   </ul>
 </div>
 ```
-
-

pages/css/components/popover.md

@@ -51,7 +51,7 @@ Defaults to caret oriented top-center.
 ```html title="Default (top-center)"
 <div class="position-relative text-center">
   <button class="btn btn-primary">UI</button>
-  <div class="Popover right-0 left-0">
+  <div class="Popover right-0 left-0 position-relative">
     <div class="Popover-message text-left p-4 mt-2 mx-auto Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
@@ -66,7 +66,7 @@ Defaults to caret oriented top-center.
 ```html title="Large"
 <div class="position-relative text-center">
   <button class="btn btn-primary">UI</button>
-  <div class="Popover right-0 left-0">
+  <div class="Popover right-0 left-0 position-relative">
     <div class="Popover-message Popover-message--large text-left p-4 mt-2 Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
@@ -94,7 +94,7 @@ Defaults to caret oriented top-center.
 ### Bottom-right
 
 ```html title="Bottom-right"
-<div class="position-relative text-right">
+<div class="position-relative text-right pr-2">
   <div class="Popover position-relative">
     <div class="Popover-message Popover-message--bottom-right p-4 mb-2 text-left Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
@@ -109,14 +109,14 @@ Defaults to caret oriented top-center.
 ### Bottom-left
 
 ```html title="Bottom-left"
-<div class="Popover position-relative">
+<div class="Popover position-relative pl-2">
   <div class="Popover-message Popover-message--bottom-left p-4 mb-2 Box box-shadow-large">
     <h4 class="mb-2">Popover heading</h4>
     <p>Message about this particular piece of UI.</p>
     <button type="submit" class="btn btn-outline mt-2 text-bold">Got it!</button>
   </div>
+  <button class="btn btn-primary">UI</button>
 </div>
-<button class="btn btn-primary">UI</button>
 ```
 
 ### Left
@@ -212,9 +212,9 @@ Defaults to caret oriented top-center.
 ### Top-left
 
 ```html title="Top-left"
-<div class="position-relative">
+<div class="position-relative pl-2">
   <button class="btn btn-primary">UI</button>
-  <div class="Popover">
+  <div class="Popover position-relative">
     <div class="Popover-message Popover-message--top-left p-4 mt-2 Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
@@ -227,9 +227,9 @@ Defaults to caret oriented top-center.
 ### Top-right
 
 ```html title="Top-right"
-<div class="position-relative text-right">
+<div class="position-relative text-right pr-2">
   <button class="btn btn-primary">UI</button>
-  <div class="Popover right-0">
+  <div class="Popover right-0 position-relative">
     <div class="Popover-message Popover-message--top-right text-left p-4 mt-2 Box box-shadow-large">
       <h4 class="mb-2">Popover heading</h4>
       <p>Message about this particular piece of UI.</p>
@@ -238,4 +238,3 @@ Defaults to caret oriented top-center.
   </div>
 </div>
 ```
-

pages/css/components/tooltips.md

@@ -24,90 +24,97 @@ Before adding a tooltip, please consider: Is this information essential and nece
 ## Tooltip direction
 Specify the direction of a tooltip with north, south, east, and west directions:
 
-- `.tooltipped-n`
-- `.tooltipped-ne`
-- `.tooltipped-e`
-- `.tooltipped-se`
-- `.tooltipped-s`
-- `.tooltipped-sw`
-- `.tooltipped-w`
-- `.tooltipped-nw`
-
-
 ```html
-<span class="tooltipped tooltipped-n border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North side.">
-  Tooltip North
-</span>
-<span class="tooltipped tooltipped-ne border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North East side.">
-  Tooltip North East
-</span>
-<span class="tooltipped tooltipped-e border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the East side.">
-  Tooltip East
-</span>
-<span class="tooltipped tooltipped-se border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South East side.">
-  Tooltip South East
-</span>
-<span class="tooltipped tooltipped-s border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South side.">
-  Tooltip South
-</span>
-<span class="tooltipped tooltipped-sw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the South West side.">
-  Tooltip South West
-</span>
-<span class="tooltipped tooltipped-w border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the West side.">
-  Tooltip West
-</span>
-<span class="tooltipped tooltipped-nw border p-2 mb-2 mr-2 float-left" aria-label="This is the tooltip on the North West side.">
-  Tooltip North West
-</span>
+<div class="d-flex flex-justify-center pt-4">
+  <span class="tooltipped tooltipped-nw m-2 p-2 border" aria-label="This is the tooltip on the North West side.">
+    .tooltipped-nw
+  </span>
+  <span class="tooltipped tooltipped-n m-2 p-2 border" aria-label="This is the tooltip on the North side.">
+    .tooltipped-n
+  </span>
+  <span class="tooltipped tooltipped-ne m-2 p-2 border" aria-label="This is the tooltip on the North East side.">
+    .tooltipped-ne
+  </span>
+</div>
+<div class="d-flex flex-justify-center">
+  <span class="tooltipped tooltipped-w m-2 p-2 border" aria-label="This is the tooltip on the West side.">
+    .tooltipped-w
+  </span>
+  <span class="tooltipped tooltipped-e m-2 p-2 border" aria-label="This is the tooltip on the East side.">
+    .tooltipped-e
+  </span>
+</div>
+<div class="d-flex flex-justify-center pb-4">
+  <span class="tooltipped tooltipped-sw m-2 p-2 border" aria-label="This is the tooltip on the South West side.">
+    .tooltipped-sw
+  </span>
+  <span class="tooltipped tooltipped-s m-2 p-2 border" aria-label="This is the tooltip on the South side.">
+    .tooltipped-s
+  </span>
+  <span class="tooltipped tooltipped-se m-2 p-2 border" aria-label="This is the tooltip on the South East side.">
+    .tooltipped-se
+  </span>
+</div>
 ```
 
 ## Tooltip alignment
-Align tooltips to the left or right of an element, combined with a directional class to specify north or south.
+Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
 
 ```html
-<span class="tooltipped tooltipped-ne tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
-  Tooltip North East align left 1
-</span>
-<span class="tooltipped tooltipped-ne tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NE and aligned left.">
-  Tooltip North East align left 2
-</span>
-<span class="tooltipped tooltipped-se tooltipped-align-left-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
-  Tooltip South East align left 1
-</span>
-<span class="tooltipped tooltipped-se tooltipped-align-left-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SW and aigned left.">
-  Tooltip South East align left 2
-</span>
-<span class="tooltipped tooltipped-nw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
-  Tooltip North West align right 1
-</span>
-<span class="tooltipped tooltipped-nw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped NW and aligned right.">
-  Tooltip North West align right 2
-</span>
-<span class="tooltipped tooltipped-sw tooltipped-align-right-1 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
-  Tooltip South West align right 1
-</span>
-<span class="tooltipped tooltipped-sw tooltipped-align-right-2 border p-2 mb-2 mr-2 float-left" aria-label="Tooltipped SE and aligned right.">
-  Tooltip South West align right 2
-</span>
+<div class="d-flex flex-justify-center pt-4">
+  <span class="tooltipped tooltipped-nw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
+    .tooltipped-nw .tooltipped-align-right-1
+  </span>
+  <span class="tooltipped tooltipped-ne tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
+    .tooltipped-ne .tooltipped-align-left-1
+  </span>
+</div>
+<div class="d-flex flex-justify-center">
+  <span class="tooltipped tooltipped-nw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped NW and aligned right.">
+    .tooltipped-nw .tooltipped-align-right-2
+  </span>
+  <span class="tooltipped tooltipped-ne tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped NE and aligned left.">
+    .tooltipped-ne .tooltipped-align-left-2
+  </span>
+</div>
+<div class="d-flex flex-justify-center">
+  <span class="tooltipped tooltipped-sw tooltipped-align-right-1 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
+    .tooltipped-sw .tooltipped-align-right-1
+  </span>
+  <span class="tooltipped tooltipped-se tooltipped-align-left-1 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+    .tooltipped-se .tooltipped-align-left-1
+  </span>
+</div>
+<div class="d-flex flex-justify-center pb-4">
+  <span class="tooltipped tooltipped-sw tooltipped-align-right-2 m-2 p-2 border" aria-label="Tooltipped SE and aligned right.">
+    .tooltipped-sw .tooltipped-align-right-2
+  </span>
+  <span class="tooltipped tooltipped-se tooltipped-align-left-2 m-2 p-2 border" aria-label="Tooltipped SW and aigned left.">
+    .tooltipped-se .tooltipped-align-left-2
+  </span>
+</div>
 ```
 
 ## Tooltips with multiple lines
 Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
 
 
 ```html
-<span class="tooltipped tooltipped-multiline tooltipped-n border p-2" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
-  Tooltip with multiple lines
-</span>
+<div class="d-flex flex-justify-center pt-6">
+  <span class="tooltipped tooltipped-n tooltipped-multiline m-2 p-2 border" aria-label="This is the tooltip with multiple lines. This is the tooltip with multiple lines.">
+    .tooltipped-multiline
+  </span>
+</div>
 ```
 
-## Tooltips No Delay
+## Tooltips with no delay
 
-By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a modifier class you can use to override this. `.tooltipped-no-delay`
+By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
 
 ```html
-<span class="tooltipped tooltipped-n tooltipped-no-delay border p-2" aria-label="This is the tooltip on the no delay side.">
-  Tooltip no delay
-</span>
+<div class="d-flex flex-justify-center pt-4">
+  <span class="tooltipped tooltipped-n tooltipped-no-delay m-2 p-2 border" aria-label="This is the tooltip on the no delay side.">
+    .tooltipped-no-delay
+  </span>
+</div>
 ```
-

pages/css/utilities/layout.md

@@ -247,11 +247,13 @@ Use `.position-absolute` to take elements out of the normal document flow.
 
 Use `.position-fixed` to position an element relative to the viewport. **Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.**
 
-_Note: fixed positioning has been disabled here for demonstration only._
+_Note: This example is shown in an `<iframe>` and therefore will not be positioned to the viewport of this page._
 
 ```html
-<div class="position-fixed bg-gray-light border-bottom border-gray p-3">
-  .position-fixed
+<div style="height: 64px;">
+  <div class="position-fixed right-0 bottom-0 bg-gray-light border p-2">
+    .position-fixed
+  </div>
 </div>
 ```
 

pages/css/utilities/marketing-layout.md

@@ -32,8 +32,8 @@ In an effort to reduce the size of our CSS, responsive breakpoints are only supp
 Using column offset classes can pull a div over X number of columns to the left. Negative offsets are available in [spacings from 1](../support/spacing/#spacing-scale) [to 7](../support/marketing-variables/).
 
 ```html
-<div class="clearfix">
-  <div class="offset-n1 col-3 border p-3">.offset-n1</div>
-  <div class="offset-n2 col-3 border p-3">.offset-n2</div>
+<div class="mx-auto border" style="width: 300px">
+  <div class="offset-n1 col-4 border p-3">.offset-n1</div>
+  <div class="offset-n2 col-4 border p-3">.offset-n2</div>
 </div>
 ```