fix: stack the sidebar above content on narrow viewports - #3249
AhtishamShahid wants to merge 1 commit into
Conversation
The outline and unit pages laid the sidebar beside the page content in a plain flex row with no responsive handling. The panel is a fixed 440px and its icon rail ~74px, and neither shrinks, so below ~1002px the content column overflowed its own width, slid underneath the opaque sidebar panel, and pushed the page into horizontal scroll. Stack the sidebar above the content below that width instead, which is what the pre-rewrite Paragon grid did at `sm`/`xs`. The breakpoint is derived from the widths involved rather than hard-coded. When stacked, the panel fills the width, the drag handle is hidden, and the icon rail becomes a horizontal toolbar above the panel. Also fix the overflow sources that outlived the sidebar: - ResizableBox kept a dragged width that no longer fit after the window was narrowed, so a widened sidebar overflowed at widths that were otherwise fine. Clamp it on render, keeping the preferred width in state. - Outline card headers had a min-content width of ~520px because the badges and action menu could not wrap. Let them wrap. - SubHeader's action row was `flex-shrink-0`, squeezing the title onto three or four lines and still overflowing. Let it shrink and wrap. - The outline StatusBar could not wrap, so its last button overflowed. - Drop the collapsed-state placeholder div, which rendered as a stray 2px bordered gap beside the rail.
openedx-webhooks
added
the
open-source-contribution
|
Thanks for the pull request, @AhtishamShahid! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. 🔘 Update the status of your PRYour PR is currently marked as a draft. After completing the steps above, update its status by clicking "Ready for Review", or removing "WIP" from the title, as appropriate. Where can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3249 +/- ##
==========================================
+ Coverage 95.77% 96.03% +0.25%
==========================================
Files 1398 1407 +9
Lines 33425 34289 +864
Branches 7611 8150 +539
==========================================
+ Hits 32014 32930 +916
+ Misses 1367 1303 -64
- Partials 44 56 +12 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
2 participants
Description
The sidebar sat beside the page content in a plain flex row with no responsive handling. Its panel is a fixed 440px and its icon rail ~74px, and neither shrinks, so below ~1000px the content column overflowed, slid under the opaque panel, and the page scrolled sideways — 134px at a 900px window.
The sidebar now moves above the content when there is no room for both, at full width with its icon buttons in a row. Nothing changes above the breakpoint, which is derived from the widths involved (440 panel + 74 rail + 440 minimum content + 48 gutters = 1002px) rather than hard-coded.
Three smaller things independently caused sideways scrolling too:
ResizableBoxkept a dragged width after the window shrank. It now clamps as the window narrows, and restores your width when you widen again.SubHeaderaction row, and the outline status bar could not wrap. They now wrap.CSS and layout only — no API or data changes, and no change above the breakpoint.
Supporting information
Reported against an MIT Open Learning deployment; the originating issue is in a private tracker, so the detail is here rather than linked. I found no existing issue in this repo and am happy to file one. The behavior appears to start with #3057 and reproduces on
master.Testing instructions
Resize a real browser window — the fix depends on media queries.
/course/<course-id>) with the sidebar open and drag the window narrower. Before: a horizontal scrollbar below ~1035px, and cards sliced by the sidebar panel. After: no horizontal scrollbar at any width; at ~1000px the sidebar moves above the content, and back beside it when you widen./container/<block-id>), which uses the same layout.Verified on this head: CI green including the
testsjob and coverage;tsc --noEmitandstylelintclean locally.Other information
@edx/frontend-component-headerswitches toMobileHeaderonly atmaxWidth={841}. It wraps rather than overflows, so it causes no scrolling, and needs its own PR there.masterhas since touched six of these nine files — needs a rebase before merge.order: -1), capped at60vh. One-line change if you would rather it sat below.Best Practices Checklist
.ts,.tsx) — no new filespropTypesanddefaultPropsin any new or modified codesrc/testUtils.tsx— n/a, no tests addeddescription— n/a, no new messages../in import paths — no imports added