From c9af2b69e67d044321e7de3efc47558b56603d36 Mon Sep 17 00:00:00 2001
From: Tenzin Choeying <tenzinchoeying@Tenzins-MacBook-Pro.local>
Date: Sat, 30 May 2026 12:18:07 +0530
Subject: [PATCH 1/3] fix: prevent long unit titles from overlapping discussion
 controls

Let the title container flex and wrap based on available width instead of competing with the full-width nav row, and add spacing between title and action buttons.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/index.scss                           | 19 +++++++++++++++++++
 src/plugin-slots/UnitTitleSlot/index.jsx |  8 ++++----
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index b42307de99..1a9193cf63 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -432,6 +432,25 @@
   }
 }
 
+.unit-title-header {
+  width: 100%;
+
+  .unit-title-container {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  .unit-title-nav {
+    flex: 0 0 auto;
+  }
+
+  @media (--pgn-size-breakpoint-min-width-xl) {
+    .unit-title-container {
+      padding-right: var(--pgn-spacing-spacer-2);
+    }
+  }
+}
+
 // This class forces any modals using 'modal-lti' as their dialogClassName to take up the whole
 // window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
 // size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index 22e05cecfd..20b4684aeb 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -24,11 +24,11 @@ const UnitTitleSlot = ({
         renderUnitNavigation,
       }}
     >
-      <div className="d-flex flex-column-reverse flex-xl-row align-items-start align-items-xl-center justify-content-between">
-        <div className="mb-0 mt-3 mt-xl-0">
-          <h3 className="h3">{unit.title}</h3>
+      <div className="unit-title-header d-flex flex-column-reverse flex-xl-row align-items-start align-items-xl-center justify-content-between gap-3">
+        <div className="unit-title-container mb-0 mt-3 mt-xl-0">
+          <h3 className="h3 text-break mb-0">{unit.title}</h3>
         </div>
-        <div className="w-100">
+        <div className="unit-title-nav flex-shrink-0">
           {renderUnitNavigation(true)}
         </div>
       </div>

From 3cc4b6f491a4b6da1a641523e7d78da5806f1a76 Mon Sep 17 00:00:00 2001
From: Tenzin Choeying <tenzinchoeying@Tenzins-MacBook-Pro.local>
Date: Sat, 30 May 2026 13:00:18 +0530
Subject: [PATCH 2/3] fix: wrap long unit titles instead of overlapping
 discussion controls

Use a CSS grid (minmax(0, 1fr) auto) so the unit title is bounded by its
container and wraps based on available width rather than its length. Allow
long unbroken titles to break, neutralize the empty outline trigger's
negative margin that pulled the discussion buttons onto the title, and
use a single min-width:xl query for the row layout to avoid the 1200px
breakpoint collision. Stacks responsively below xl.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/index.scss                           | 46 +++++++++++++++++++++---
 src/plugin-slots/UnitTitleSlot/index.jsx |  6 ++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index 1a9193cf63..6f23a3e8ff 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -433,20 +433,58 @@
 }
 
 .unit-title-header {
+  display: grid;
   width: 100%;
+  column-gap: var(--pgn-spacing-spacer-3);
+  row-gap: var(--pgn-spacing-spacer-2);
+  align-items: center;
+  grid-template-columns: 1fr;
 
   .unit-title-container {
-    flex: 1 1 0;
     min-width: 0;
+    max-width: 100%;
   }
 
   .unit-title-nav {
-    flex: 0 0 auto;
+    min-width: 0;
+    max-width: 100%;
+    justify-self: end;
+    width: 100%;
+    // Mobile-first: nav buttons sit above the title (stacked).
+    order: -1;
+
+    .top-unit-navigation {
+      width: auto;
+      max-width: 100%;
+    }
+
+    .top-unit-navigation > .d-flex.w-100 {
+      width: auto;
+      max-width: 100%;
+    }
+  }
+
+  .unit-title-container h3 {
+    overflow-wrap: anywhere;
+    word-break: break-word;
   }
 
+  // Switch to the side-by-side row layout only from xl up. Using a single
+  // min-width query (instead of a separate max-width-lg rule) avoids the
+  // 1200px boundary where both queries would otherwise apply at once.
   @media (--pgn-size-breakpoint-min-width-xl) {
-    .unit-title-container {
-      padding-right: var(--pgn-spacing-spacer-2);
+    grid-template-columns: minmax(0, 1fr) auto;
+
+    .unit-title-nav {
+      order: 0;
+      width: auto;
+
+      // On desktop the outline trigger renders empty, but its negative
+      // margin still pulls the discussion/notification buttons left over
+      // the title. Neutralize it inside this header only.
+      .outline-trigger-mobile {
+        margin-left: 0;
+      }
     }
   }
 }
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index 20b4684aeb..33a03af8c7 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -24,11 +24,11 @@ const UnitTitleSlot = ({
         renderUnitNavigation,
       }}
     >
-      <div className="unit-title-header d-flex flex-column-reverse flex-xl-row align-items-start align-items-xl-center justify-content-between gap-3">
+      <div className="unit-title-header">
         <div className="unit-title-container mb-0 mt-3 mt-xl-0">
-          <h3 className="h3 text-break mb-0">{unit.title}</h3>
+          <h3 className="h3 mb-0">{unit.title}</h3>
         </div>
-        <div className="unit-title-nav flex-shrink-0">
+        <div className="unit-title-nav">
           {renderUnitNavigation(true)}
         </div>
       </div>

From c362fac9baa44b4edc6a83473d6a9f4720b1ed49 Mon Sep 17 00:00:00 2001
From: Tenzin Choeying <tenzinchoeying@Tenzins-MacBook-Pro.local>
Date: Sat, 30 May 2026 19:13:02 +0530
Subject: [PATCH 3/3] chore: comment out missing brand learning-mfe stylesheet
 import

learning-mfe.scss is not present in the installed @openedx/brand-openedx
package, which breaks the webpack build. Comment it out (approved) until a
custom brand providing this file is added.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/index.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.scss b/src/index.scss
index 6f23a3e8ff..e1f3440ab5 100755
--- a/src/index.scss
+++ b/src/index.scss
@@ -5,7 +5,8 @@
 @import "~@edx/frontend-component-footer/dist/footer";
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/brand/paragon/overrides";
-@import "~@edx/brand/paragon/learning-mfe";
+// learning-mfe.scss is not present in @openedx/brand-openedx; uncomment when custom brand is added
+//@import "~@edx/brand/paragon/learning-mfe";
 
 
 #root {