Bug/fix unit title discussion overlap - #13
Merged
choeying-10 merged 4 commits intoMay 30, 2026
Conversation
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>
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>
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>
10kalden
approved these changes
May 30, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Long unit titles in the Learning MFE courseware header overlapped the discussion/forum and navigation buttons, and even when they didn't overlap they sat too close to the buttons. This PR makes the title wrap based on its container width (not its character count), keeps clear spacing from the action buttons, and behaves responsively across all breakpoints.
Problem
In the unit header (
UnitTitleSlot), the title<h3>and the nav row (discussion, notifications, prev/next) were laid out with Bootstrap flex utilities (flex-xl-row,w-100). With a long title this caused:min-width: 0/ wrapping rules, so it overflowed into the buttons, especially when the discussions sidebar narrowed the content column.w-100competed with the title for horizontal space.Two additional issues surfaced while verifying with runtime layout measurements:
.outline-trigger-mobilewrapper still carriedmargin-left: -2.4rem, dragging the discussion buttons ~26px onto the title.1200px(min-width-xlandmax-width-lgboth firing) collapsed the nav to0width.Changes
src/plugin-slots/UnitTitleSlot/index.jsx— replaced the flex utility classes with semantic wrappers (unit-title-header,unit-title-container,unit-title-nav).src/index.scssgrid-template-columns: minmax(0, 1fr) auto(≥xl) so the title is bounded by its container and wraps; single1frcolumn with the nav stacked on top below xl.overflow-wrap: anywhereso long unbroken titles break instead of overflowing.column-gap/row-gapfor consistent spacing between title and buttons.min-width: xlquery for the row layout to avoid the 1200px breakpoint collision.@edx/brand/paragon/learning-mfeimport, which is missing from the installed@openedx/brand-openedxpackage and breaks the webpack build (approved).