Sidebar navigation takes over half the width of the page when Indigo theme is used

[crathbun428]

Steps to Reproduce

1. Login to an instance using the Indigo theme as an admin user to ensure the courseware.enable_navigation_sidebar waffle flag is enabled
2. Navigate to an in-course experience page
3. With the sidebar navigation expanded, view the page

Expected Behavior

1. The sidebar navigation when expanded takes up much less than half of the page horizontally (see attached image from an in-course experience page using the Open edX theme)
2. There is a reasonable amount of blank space on either side of the course content/sidebar content
   

Expected Behavior

1. The sidebar navigation when expanded takes up half of the page horizontally (see attached image from an in-course experience page using the Indigo theme)
2. There is a lot of extra blank space on either side of the course content/sidebar content
   

[mariajgrimaldi]

FYI @arbrandes @brian-smith-tcril @openedx/2u-infinity, please tag anyone you think can help. Thanks!

[crathbun428]

@GlugovGrGlib - curious about the effort level for this fix? The experience navigating course content in indigo is more clunky with the course content view so narrow (see screenshot above). It's not a release blocker, and because this isn't the default experience, I didn't mark it as high priority, but resolving this ahead of release (if possible) would be a huge win for this feature (I'd prioritize it second in the sidebar bugs - below #1013).

[crathbun428]

@brian-smith-tcril - Curious if it's possible to easily tell if this is a quick and simple fix or maybe something deeper?

[brian-smith-tcril]

Considering this is an issue on the indigo theme and not on the Open edX theme, it would need to be addressed there.

Since this is in an MFE, it would need to be addressed in the indigo fork of @openedx/brand.

The tutor-indigo plugin installs @edly-io/indigo-brand-openedx pinned to version ^1.0.0 (see https://github.com/overhangio/tutor-indigo/blob/57ffd11cfc55e4640b224a1f3826a7e9717b8f5f/tutorindigo/plugin.py#L108), meaning the latest 1.x.x release.

As of writing, that is version 1.4.1 (https://www.npmjs.com/package/@edly-io/indigo-brand-openedx/v/1.4.1?activeTab=versions)

This appears to have been published from the quince/indigo branch, as https://github.com/edly-io/brand-openedx/releases/tag/indigo-1.4.1 is on commit 0622d6a, and as of writing that matches the latest commit here https://github.com/edly-io/brand-openedx/tree/quince/indigo

The issue appears to be this line https://github.com/edly-io/brand-openedx/blob/0622d6a6bdf1f5ba84bfaf6cd4d18133a4b3b57d/paragon/_overrides.scss#L14

.container-xl {
    max-width: 1090px !important;

With that removed I see

However, simply removing that line will change a lot of things globally. I don't expect that change to be something indigo maintainers would be happy with, and I'm not sure what it would take to address this in a less far-reaching way.

[crathbun428]

@brian-smith-tcril - Thanks for this insight, Brian. Not excited about the result, but this input will help me make some calls. Thank you!

[GlugovGrGlib]

Hi @crathbun428 @mariajgrimaldi, we should move this issue to https://github.com/overhangio/tutor-indigo/ repository, so the indigo theme maintainer will address and take decision about theme redesign

[GlugovGrGlib]

The new issue was created in the tutor-indigo repository: overhangio/tutor-indigo#83

[crathbun428]

@GlugovGrGlib - Thank you! This makes sense to me. My plan is to figure out if there is an appropriate product contact I can chat with about this issue, too. Thank you for creating this issue in the indigo theme repository.

[GlugovGrGlib]

@crathbun428 Good news! Edly just resolved this issue today - overhangio/tutor-indigo#83
You can already see the results on the redwood sandbox environment - https://redwood.demo.edly.io/

[crathbun428]

@GlugovGrGlib - Amazing! This is such good news - thank you for the head's up!!

[GlugovGrGlib]

Fixed by overhangio/tutor-indigo#85