Add min-width to Page contents

src/objects/page/page.scss

@@ -1,16 +1,17 @@
 /**
  * Page container
  *
- * Attempts to fill the available area (assuming `height: 100%` is correctly
- * applied to all parent elements) and keeps the footer at the bottom of that
- * area.
- *
- * @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid
+ * 1. Avoid grid blowouts by specifying the `min-width` of the column.
+ *    @see https://css-tricks.com/you-want-minmax10px-1fr-not-1fr/
+ * 2. Attempts to fill the available area (assuming `height: 100%` is applied
+ *    to all parent elements) & keep the footer at the bottom of that area.
+ *    @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid
  */
 
 .o-page {
   display: grid;
-  grid-template-rows: 1fr auto;
+  grid-template-columns: minmax(0, 1fr); // 1
+  grid-template-rows: 1fr auto; // 2
   min-height: 100%;
 }
 

src/prototypes/single-article/example/example.twig

@@ -1,3 +1,6 @@
+<div class="o-page">
+<div class="o-page__content">
+
 {% include '@cloudfour/components/sky-nav/sky-nav.twig' with {
   "class": "t-dark",
   "include_main_demo": false,
@@ -35,14 +38,19 @@
     ]
   }
 } only %}
+
 {% set content %}
-<button class="Button">
-  <span class="Button-inner">
-    Example
-  </span>
-  <!-- badge, etc. -->
-</button>
+.backButton {
+  display: none;
+}
+
+@media (display-mode: standalone), (display-mode: fullscreen) {
+  .backButton {
+    display: block;
+  }
+}
 {% endset %}
+
 {% embed '@cloudfour/objects/container/container.twig' with {
   class: 'o-container--prose o-container--pad u-pad-block-6'} %}
   {% block content %}
@@ -139,7 +147,7 @@
 
             <p>There are some places where Slowpoke is worshiped because of a long-standing belief that whenever Slowpoke yawns, it rains. Carrying food through <code>Fearow’s territory is dangerous</code>. It will snatch the food away from you in a flash! Oddish searches for fertile, nutrient-rich soil, then plants itself. During the daytime, while it is planted, this <code>Pokémon’s feet</code> are thought to change shape and become similar to the roots of trees.</p>
 
-            <pre><code class="language-markup">{{content|trim|escape}}</code></pre>
+            <pre><code class="language-css">{{content|trim|escape}}</code></pre>
 
             <p>In the distant past, they were fairly strong, but they have become gradually weaker over time. Although known for their splendid tail fins, Goldeen apparently compete among themselves to see whose horn is thickest and sharpest. Beautifly has a long mouth like a coiled needle, which is very convenient for collecting pollen from flowers. This Pokémon rides the spring winds as it flits around gathering pollen.</p>
 
@@ -298,6 +306,10 @@
     {% endembed %}
   {% endblock %}
 {% endembed %}
+
+</div>
+<div class="o-page__footer">
+
 {% include '@cloudfour/components/ground-nav/ground-nav.twig' with {
   "menu": {
     "items": [
@@ -389,3 +401,6 @@
     "founding_date": "2007-12-13"
   }
 } only %}
+
+</div>
+</div>