Fix course tab responsiveness by adding slot-based overflow tabs#4590
Open
zamanafzal wants to merge 6 commits into
Open
Fix course tab responsiveness by adding slot-based overflow tabs#4590zamanafzal wants to merge 6 commits into
zamanafzal wants to merge 6 commits into
Conversation
for more information, see https://pre-commit.ci
Contributor
There was a problem hiding this comment.
Pull request overview
This PR replaces the default Learning MFE course tab links (via the org.openedx.frontend.learning.course_tab_links.v1 plugin slot) with a custom ResponsiveCourseTabs component that implements deterministic “overflow into a More… dropdown” behavior on narrow viewports, along with MITx Online–scoped styling to support that behavior.
Changes:
- Add a new
ResponsiveCourseTabsReact component that measures tab widths and splits visible vs overflow tabs with a Paragon dropdown. - Wire the new component into the Learning MFE plugin slot configuration for
mitxonlinedeployments. - Add MITx Online SCSS overrides to hide upstream overflow UI and style the custom overflow dropdown.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
src/bridge/settings/openedx/mfe/slot_config/ResponsiveCourseTabs.jsx |
New slot component implementing JS-based tab overflow measurement and “More…” dropdown rendering. |
src/bridge/settings/openedx/mfe/slot_config/mitxonline-styles.scss |
Adds scoped tab-navigation CSS overrides and dropdown styling for the custom overflow menu. |
src/bridge/settings/openedx/mfe/slot_config/learning-mfe-config.env.jsx |
Configures the Learning MFE plugin slot to replace default course tab links with ResponsiveCourseTabs for mitxonline. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+212
to
+218
| .nav > .nav-item:has(> .dropdown > #learn\\.course\\.tabs\\.navigation\\.overflow\\.menu) { | ||
| display: none !important; | ||
| } | ||
| // Fallback: hide any Tabs.jsx overflow element that is not ours | ||
| .nav > .nav-item:not(.responsive-tabs-overflow):has(> .dropdown) { | ||
| display: none !important; | ||
| } |
Ardiea
approved these changes
May 8, 2026
…n-mobile' into zafal/11008-fix-responsiveness-on-mobile
Ardiea
approved these changes
May 14, 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
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.
What are the relevant tickets?
https://github.com/mitodl/hq/issues/11008
Description (What does it do?)
Replaced default course tab links via org.openedx.frontend.learning.course_tab_links.v1 with ResponsiveCourseTabs.
Added JS-based overflow handling so tabs collapse into a More... dropdown on narrow screens.
Fixed hidden measurement rendering to avoid right-side blank whitespace/overflow.
Added scoped tab/dropdown styles under #courseTabsNavigation and kept mobile content search hidden.
Removed broad/experimental CSS and duplicate config noise to keep final behavior minimal and stable.
Issue:
Upstream tab overflow logic did not behave correctly with the current plugin-slot rendering shape, causing tabs to go out of bounds or not show dropdown reliably on small screens.
Screenshots (if appropriate):
https://www.loom.com/share/db5c734974c549cdb4974a662cc8c785
How can this be tested?
To test this feature locally:
Set up Tutor instance locally as described in this guide
Mount frontend-app-learning locally
Add ResponsiveCourseTabs component: Copy ResponsiveCourseTabs.jsx to the root of your local frontend-app-learning repository (alongside the .env file)
Update configuration: Update env.config.jsx with the content from learning-mfe-config.env.jsx in this PR
Update scss: Update mitxonline-styles.scss in rontend-app-learning