Simon-Initiative / oli-torus

Next Generation OLI Authoring and Delivery Platform
https://proton.oli.cmu.edu
MIT License
81 stars 35 forks source link

[BUG FIX] [MER-3342] Ensure enough width for embedded activities on graded pages #4868

Closed andersweinstein closed 1 month ago

andersweinstein commented 1 month ago

Graded page layout was effectively centering page items within a container that took on the width of the widest content within it. This occasionally resulted in very narrow layouts: although items do stretch to fill the container width, the container div winds up only as wide as the natural size of the widest content. If the only item is narrow, so is the content area width. This is odd but tolerable for some questions, but intolerable for iframe-embedded activities such as LogicLab or StatTutor which expect to stretch to fill substantial width, but wind up only 300 px wide. There are cases where a graded page consists only of such activities, so they become unusable.

This PR adjusts layout parameters to ensure activities stretch to fill the full content area.

In addition, the maximum content area width on graded pages was changed from v27 to be smaller (720 px) than the width on practice pages (880 px). This PR also enlarges the maximum width of content on graded pages to be the same as on practice pages, standardizing on 880 px content width plus 80 px of padding on each side (in some places achieved via max-w-[1040px] px-[80px]). Used for consistency on all variants of graded page including the pre-attempt prologue and review mode page, even though the non-activity versions do not require this width.

OLD:

Screenshot 2024-05-31 at 12 59 43 PM

NEW:

Screenshot 2024-06-11 at 2 58 24 PM