frontend-app-learning icon indicating copy to clipboard operation
frontend-app-learning copied to clipboard

sequence-container > outline-sidebar-wrapper height is set by sequence height, hiding navigation when content is short

Open wgu-jesse-stewart opened this issue 7 months ago • 0 comments

Summary:
When content within a sequence is shorter than the height of the browser viewport, the .sequence-container > .outline-sidebar-wrapper element does not expand appropriately. This causes the course outline sidebar to be partially or completely hidden from view.

Steps to Reproduce:

  1. Open a course sequence that contains very little content (e.g., a short paragraph or notice).

  2. View the course in a tall browser window.

  3. Observe that the sidebar navigation is cut off or hidden.

Expected Behavior:
The sidebar should remain fully visible and accessible, regardless of the amount of content in the main pane.

Actual Behavior:
When the content is short, the parent container height collapses to fit that content, which in turn restricts the sidebar’s height, hiding part of the navigation.

Suggested Fix:
The entire layout—especially .sequence-container and its direct children—should enforce a minimum height of 100svh (small viewport height units) to ensure it always fills the screen. This ensures that structural elements like sidebars are not cut off even when the main content area is empty or minimal.

Screenshots:
Image

Image

Environment:

  • Open edX version: Sumac

  • Browser: Chrome 136

  • OS: macOS 15.4

Additional Context:
This issue becomes especially noticeable in new or restricted courses where the content is sparse. Applying min-height: 100svh ensures a stable layout and consistent navigation availability across all content scenarios.

wgu-jesse-stewart avatar May 02 '25 19:05 wgu-jesse-stewart