From 6fb8fbcc189e4cbaf95be36c470dac7364e12e6b Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 18 Nov 2021 15:32:02 -0800 Subject: [PATCH 1/3] Add min-width to Page contents This PR fixes a bug where blog posts that contained lengthy code samples were breaking layout. The bug wasn't actually caused by the code samples, which have the proper `overflow:auto` property set. Instead, this is caused by an oddity of Grid layouts, where the Grid items by default have `min-width:auto`, which can prevent them from reducing width the way you might expect. The fix is to tell the Grid layout that the minimum width for Grid items is 0, and then it will shrink the way you'd expect. @see https://ishadeed.com/article/min-content-size-css-grid/ Fixes #1532 --- src/objects/page/page.scss | 6 ++++ .../single-article/example/example.twig | 29 ++++++++++++++----- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/src/objects/page/page.scss b/src/objects/page/page.scss index b7ffed900..dd8806cb5 100644 --- a/src/objects/page/page.scss +++ b/src/objects/page/page.scss @@ -18,12 +18,18 @@ * These classes aren't strictly required, but they keep the HTML source a * little easier to read while also supporting swapping of source order if * that's ever something that content calls for. + * + * 1. By default grid items have min-width:auto which is breaking layout + * on blog posts with long code samples. + * @see https://ishadeed.com/article/min-content-size-css-grid/ */ .o-page__content { grid-row: 1; + min-width: 0; // 1 } .o-page__footer { grid-row: 2; + min-width: 0; // 1 } diff --git a/src/prototypes/single-article/example/example.twig b/src/prototypes/single-article/example/example.twig index e53edf8d9..f8e732b10 100644 --- a/src/prototypes/single-article/example/example.twig +++ b/src/prototypes/single-article/example/example.twig @@ -1,3 +1,6 @@ +
+
+ {% include '@cloudfour/components/sky-nav/sky-nav.twig' with { "class": "t-dark", "include_main_demo": false, @@ -35,14 +38,19 @@ ] } } only %} + {% set content %} - +.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 @@

There are some places where Slowpoke is worshiped because of a long-standing belief that whenever Slowpoke yawns, it rains. Carrying food through Fearow’s territory is dangerous. 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 Pokémon’s feet are thought to change shape and become similar to the roots of trees.

- 
{{content|trim|escape}}
+ 
{{content|trim|escape}}

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.

@@ -298,6 +306,10 @@ {% endembed %} {% endblock %} {% endembed %} + +
+
+ {% include '@cloudfour/components/ground-nav/ground-nav.twig' with { "menu": { "items": [ @@ -389,3 +401,6 @@ "founding_date": "2007-12-13" } } only %} + +
+
From cab4ba3682465de01316388f70fb28127024b642 Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Thu, 18 Nov 2021 15:41:08 -0800 Subject: [PATCH 2/3] better comment --- src/objects/page/page.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/objects/page/page.scss b/src/objects/page/page.scss index dd8806cb5..faa91c648 100644 --- a/src/objects/page/page.scss +++ b/src/objects/page/page.scss @@ -19,8 +19,9 @@ * little easier to read while also supporting swapping of source order if * that's ever something that content calls for. * - * 1. By default grid items have min-width:auto which is breaking layout - * on blog posts with long code samples. + * 1. By default grid items have `min-width:auto` which is breaking layout on + * blog posts with long code samples. Setting `min-width:0` allows the grid + * items to shrink, regardless of their intrinsic size. * @see https://ishadeed.com/article/min-content-size-css-grid/ */ From 86b179173e3c84ef65b74a9c8c728d213c4fc57d Mon Sep 17 00:00:00 2001 From: Scott Vandehey Date: Fri, 19 Nov 2021 13:44:28 -0800 Subject: [PATCH 3/3] use minmax instead --- src/objects/page/page.scss | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/objects/page/page.scss b/src/objects/page/page.scss index faa91c648..c8b3949f3 100644 --- a/src/objects/page/page.scss +++ b/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%; } @@ -18,19 +19,12 @@ * These classes aren't strictly required, but they keep the HTML source a * little easier to read while also supporting swapping of source order if * that's ever something that content calls for. - * - * 1. By default grid items have `min-width:auto` which is breaking layout on - * blog posts with long code samples. Setting `min-width:0` allows the grid - * items to shrink, regardless of their intrinsic size. - * @see https://ishadeed.com/article/min-content-size-css-grid/ */ .o-page__content { grid-row: 1; - min-width: 0; // 1 } .o-page__footer { grid-row: 2; - min-width: 0; // 1 }