fix(style): prevent page overflow

Pages with wide horizontal content could horizontally scroll on mobile due to `.page-wrapper` not having fixed width in f851142fb295d1d6a32810bd328de99d5c6321a9

Re-add overflow-wrap which was removed in e6dba41f3dfb81eeaef8546d5e50a864d53c3fe7 (in attempt to simplify logic).

Add horizontal scroll to unresponsive Plotly charts.

Also, refactor chart style and refactor callout styles into dedicated file.

This commit attempts to fix https://discord.com/channels/722225264733716590/742863504515793149/774343154949816350

wowchemy/assets/scss/wowchemy/_callouts.scss

@@ -0,0 +1,66 @@
+// Callout styles for the Callout shortcode
+
+/* Style asides as Bootstrap alerts. */
+.article-style aside {
+  @extend .alert;
+}
+
+/* Asides use <p> block element whereas alerts use <div>. */
+.article-style aside p,
+div.alert > div {
+  position: relative;
+  display: block;
+  font-size: 1rem;
+  margin-left: 2rem;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+div.alert div > * {
+  margin-bottom: .5rem;  /* Use smaller paragraph spacing than usual. */
+}
+
+div.alert div > :last-child {
+  margin-bottom: 0;
+}
+
+.article-style aside p::before,
+div.alert > div:first-child::before {
+  position: absolute;
+  top: -0.5rem;
+  left: -2rem;
+  font-size: 1.5rem;
+  color: #209cee;
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  content: '\f05a';
+  width: 1.5rem;
+  text-align: center;
+}
+
+div.alert-warning > div:first-child::before {
+  font-family: 'Font Awesome 5 Free';
+  font-weight: 900;
+  color: #ff3860;
+  content: '\f071';
+}
+
+.article-style aside a,
+div.alert a {
+  color: currentColor;
+  text-decoration: none;
+  border-bottom: solid 1px currentColor;
+}
+
+.article-style aside,
+.alert-note {
+  color: #12537e;
+  background-color: #f6fbfe;
+  border-color: #209cee;
+}
+
+.alert-warning {
+  color: #cd0930;
+  background-color: #fff5f7;
+  border-color: #ff3860;
+}

wowchemy/assets/scss/wowchemy/_content.scss

@@ -137,7 +137,7 @@ article .article-metadata {
 
 @mixin word-wrap() {
   // Break very long words such as pasted URL strings.
-  //overflow-wrap: break-word;
+  overflow-wrap: break-word;
   word-wrap: break-word;
   //-ms-word-break: break-all;
   //word-break: break-all;

wowchemy/assets/scss/wowchemy/_integrations.scss

@@ -1,6 +1,16 @@
-/* Mermaid.js div */
+// Mermaid.js diagram div
 div.mermaid {
   width: 100%;
   text-align: center;
   margin-bottom: 1rem;
 }
+
+// Plotly chart
+div.chart {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+  // Add horizontal scroll on mobile since Plotly
+  overflow-x: auto;
+}

wowchemy/assets/scss/wowchemy/_root.scss

@@ -41,6 +41,7 @@ body.no-navbar {
   min-height: calc(100vh - 70px);
   display: grid;
   grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100vw;
 }
 @include media-breakpoint-down(md) {
   .page-wrapper {
@@ -570,72 +571,3 @@ table > tbody > tr:hover > td,
 table > tbody > tr:hover > th {
   background-color: #e5e5e5;
 }
-
-/*************************************************
- *  Article Alerts (Shortcode) and Asides (Mmark)
- **************************************************/
-
-/* Style asides as Bootstrap alerts. */
-.article-style aside {
-  @extend .alert;
-}
-
-/* Asides use <p> block element whereas alerts use <div>. */
-.article-style aside p,
-div.alert > div {
-  position: relative;
-  display: block;
-  font-size: 1rem;
-  margin-left: 2rem;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-div.alert div > * {
-  margin-bottom: .5rem;  /* Use smaller paragraph spacing than usual. */
-}
-
-div.alert div > :last-child {
-  margin-bottom: 0;
-}
-
-.article-style aside p::before,
-div.alert > div:first-child::before {
-  position: absolute;
-  top: -0.5rem;
-  left: -2rem;
-  font-size: 1.5rem;
-  color: #209cee;
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  content: '\f05a';
-  width: 1.5rem;
-  text-align: center;
-}
-
-div.alert-warning > div:first-child::before {
-  font-family: 'Font Awesome 5 Free';
-  font-weight: 900;
-  color: #ff3860;
-  content: '\f071';
-}
-
-.article-style aside a,
-div.alert a {
-  color: currentColor;
-  text-decoration: none;
-  border-bottom: solid 1px currentColor;
-}
-
-.article-style aside,
-.alert-note {
-  color: #12537e;
-  background-color: #f6fbfe;
-  border-color: #209cee;
-}
-
-.alert-warning {
-  color: #cd0930;
-  background-color: #fff5f7;
-  border-color: #ff3860;
-}

wowchemy/assets/scss/wowchemy/wowchemy.scss

@@ -6,6 +6,7 @@
  **************************************************/
 
 @import "root";
+@import "callouts";
 @import "icons";
 @import "footer";
 @import "nav";

wowchemy/layouts/shortcodes/chart.html

@@ -1,6 +1,6 @@
 {{ $json := printf "./%s.json" (.Get "data") }}
 {{ $id := delimit (shuffle (seq 1 9)) "" }}
-<div id="chart-{{$id}}" class="chart pb-3" style="max-width: 100%; margin: auto;"></div>
+<div id="chart-{{$id}}" class="chart"></div>
 <script>
   (function() {
     let a = setInterval( function() {