Skip to content

mergin to production #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
choeying-10 merged 5 commits into from
Jun 3, 2026
Merged

mergin to production #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c9af2b6
fix: prevent long unit titles from overlapping discussion controls
May 30, 2026
3cc4b6f
fix: wrap long unit titles instead of overlapping discussion controls
May 30, 2026
c362fac
chore: comment out missing brand learning-mfe stylesheet import
May 30, 2026
ce9ebc2
Merge branch 'wbc-ulmo1-stage' into bug/fix-unit-title-discussion-ove…
choeying-10 May 30, 2026
da4f4cf
Merge pull request #13 from OpenPecha/bug/fix-unit-title-discussion-o…
choeying-10 May 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 59 additions & 1 deletion src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -431,6 +432,63 @@
}
}

.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 {
min-width: 0;
max-width: 100%;
}

.unit-title-nav {
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) {
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;
}
}
}
}

// 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.
Expand Down
8 changes: 4 additions & 4 deletions src/plugin-slots/UnitTitleSlot/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 text-nowrap">{unit.title}</h3>
<div className="unit-title-header">
<div className="unit-title-container mb-0 mt-3 mt-xl-0">
<h3 className="h3 mb-0">{unit.title}</h3>
</div>
<div className="w-100">
<div className="unit-title-nav">
{renderUnitNavigation(true)}
</div>
</div>
Expand Down
Loading