From c80019363b7d1efb49324753cdf12373e8258d32 Mon Sep 17 00:00:00 2001
From: Butterscotch! <bscotchvanilla@gmail.com>
Date: Thu, 5 Dec 2024 03:01:34 -0500
Subject: [PATCH] Use container, fix tags, & fix flexbox overflow

---
 src/_includes/layouts/page.njk | 14 ++++++++------
 src/page.scss                  |  5 +++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/_includes/layouts/page.njk b/src/_includes/layouts/page.njk
index 02cf56b..b6c3359 100644
--- a/src/_includes/layouts/page.njk
+++ b/src/_includes/layouts/page.njk
@@ -21,18 +21,20 @@
 
         <div class="section p-0-touch p-4-mid break-word">
             <div class="columns is-gapless is-desktop">
-                <div id="sidebar-menu" class="column is-2-fullhd is-3-widescreen is-3-desktop is-hidden-touch">
+                <aside id="sidebar-menu" class="column is-2-fullhd is-3-widescreen is-3-desktop is-hidden-touch">
                     {% include "src/_includes/layouts/sidebar.njk" %}
-                </div>
+                </aside>
                 <div class="column is-8-fullhd is-9-widescreen is-9-desktop mt-4-touch">
-                    <div class="section py-0{% if center_section !== false %} is-flex is-justify-content-center{% endif %}">
-                        <div class="content">
-                            {{ content | safe }}
+                    <div class="section py-0">
+                        <div class="container{% if center_section !== false %} is-flex is-justify-content-center{% endif %}">
+                            <main class="content min-width-0">
+                                {{ content | safe }}
+                            </main>
                         </div>
                     </div>
                 </div>
             </div>
-        </main>
+        </div>
 
         <script>{% getBundle "js" %}</script>
         <script type="module">{% getBundle "js", "module" %}</script>
diff --git a/src/page.scss b/src/page.scss
index 7b3724d..7a96ca4 100644
--- a/src/page.scss
+++ b/src/page.scss
@@ -25,6 +25,7 @@ $beige-lighter: #eff0eb;
 @forward "bulma/sass/components/menu";
 @forward "bulma/sass/layout/section";
 @forward "bulma/sass/grid/columns";
+@forward "bulma/sass/layout/container";
 @forward "bulma/sass/elements/content";
 
 $mid-padding: map.get(spacing.$spacing-values, "4");
@@ -55,3 +56,7 @@ $mid-padding: map.get(spacing.$spacing-values, "4");
 .break-word {
     word-break: break-word;
 }
+
+.min-width-0 {
+    min-width: 0;
+}