🐛 Allow content area to grow to fill page width

Fixes #302

CHANGELOG.md

@@ -31,6 +31,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Article updated date logic doesn't consider formatted date values ([#259](https://github.com/jpanther/congo/issues/259))
 - Error calling Paginate when attempting to generate a site with no taxonomies ([#289](https://github.com/jpanther/congo/issues/289))
 - Pagination links overflow the page area on large datasets ([#299](https://github.com/jpanther/congo/issues/299))
+- Embedded content disappears when displayed at certain viewport sizes ([#302](https://github.com/jpanther/congo/issues/302))
 - Order of articles on list pages would not follow Hugo conventions when grouped by year ([#313](https://github.com/jpanther/congo/issues/313))
 - Button shortcode overlaps table of contents when at the top of the article content ([#337](https://github.com/jpanther/congo/issues/337))
 - Providing a `colorScheme` value containing uppercase characters breaks some deployments ([#347](https://github.com/jpanther/congo/issues/347))

layouts/_default/list.html

@@ -20,7 +20,7 @@
         </div>
       </div>
     {{ end }}
-    <div class="min-w-0 min-h-0 max-w-prose">
+    <div class="min-w-0 min-h-0 max-w-prose grow">
       {{ .Content | emojify }}
     </div>
   </section>

layouts/_default/single.html

@@ -19,7 +19,7 @@
           </div>
         </div>
       {{ end }}
-      <div class="min-w-0 min-h-0 max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose grow">
         {{ .Content | emojify }}
       </div>
     </section>

layouts/_default/taxonomy.html

@@ -7,7 +7,7 @@
   </header>
   {{ if .Content }}
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
-      <div class="min-w-0 min-h-0 max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose grow">
         {{ .Content | emojify }}
       </div>
     </section>

layouts/_default/term.html

@@ -7,7 +7,7 @@
   </header>
   {{ if .Content }}
     <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
-      <div class="min-w-0 min-h-0 max-w-prose">
+      <div class="min-w-0 min-h-0 max-w-prose grow">
         {{ .Content | emojify }}
       </div>
     </section>