From 91581e791c2c4dcc07ca875ac9f8af84f268d6c4 Mon Sep 17 00:00:00 2001
From: Ram <ramon@mozillafoundation.org>
Date: Mon, 15 Jul 2024 16:50:27 -0600
Subject: [PATCH] Add overflow wrap to `#multipage-nav` secondary nav elements
 (#12559)

* Update secondary navigation overflow behavior to wrap
---
 .../templates/wagtailpages/bannered_campaign_page.html         | 2 +-
 source/sass/components/multipage-nav.scss                      | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html
index 806fc93ad00..389ae8e244b 100644
--- a/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html
+++ b/network-api/networkapi/wagtailpages/templates/wagtailpages/bannered_campaign_page.html
@@ -19,7 +19,7 @@
     <div id="multipage-horizontal-nav-wrapper" class="d-none d-md-block full-width">
         <div class="container">
             <div class="row">
-                <div class="col-12">
+                <div class="col-12 tw-flex tw-items-end tw-space-x-2">
                     {% mini_site_horizontal_nav page %}
                 </div>
             </div>
diff --git a/source/sass/components/multipage-nav.scss b/source/sass/components/multipage-nav.scss
index 2c2a9564403..c63fdb4efaa 100644
--- a/source/sass/components/multipage-nav.scss
+++ b/source/sass/components/multipage-nav.scss
@@ -10,13 +10,13 @@
     }
   }
 }
-
 #multipage-nav {
   &:not(.vertical-nav):not(.pni-category-nav) {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     border-bottom: 1px $gray-20 solid;
+    flex-wrap: wrap;
 
     @at-root #multipage-horizontal-nav-wrapper.full-width #{&} {
       border: none;
@@ -27,6 +27,7 @@
       align-items: center;
       margin-right: 2rem;
       padding-bottom: 16px;
+      padding-top: 16px;
     }
   }