This repository was archived by the owner on Jul 16, 2026. It is now read-only.
React v1.0.2 - #168
Merged
Merged
Conversation
… mobile preview renders correctly The player's responsive rules used viewport @media queries, so when a host (e.g. the Sunbird editor) rendered it in a narrow mobile-preview frame while the browser viewport stayed desktop-width, the queries never fired and the layout overflowed the frame. Switch the mobile/tablet mixins to @container queries against a new 'quml' container declared on .appShell (container-type: inline-size, so the height chain and :host freeze fix are untouched). Every responsive component is a descendant of .appShell, so layout now tracks the player's own width. When the player fills the viewport (portal, real mobile, standalone) the container width == viewport width, so breakpoints trigger identically to before. Because container-type does not reliably trap position: fixed, anchor the player's overlays to .appShell explicitly: add position: relative to .appShell and switch the mobile sections drawer, submit modal, and toast from fixed to absolute. These stay within the player box when embedded and are visually identical when the player fills the viewport. The header legend backdrop stays fixed (invisible click-catcher; absolute would scope it to its button).
…bled When partial scoring is off (responseProcessing.template is not MAP_RESPONSE), FTB and MTF were still scored proportionally (round(maxScore x matched/total)), so the editor's 'disable partial scoring' toggle had no effect on those types. Make the non-MAP_RESPONSE branch all-or-nothing: full marks only when every blank/pair is correct, else 0. MAP_RESPONSE (partial enabled) is unchanged, and SEQ/REO were already all-or-nothing. This is an intentional deviation from the Angular player, which keeps the proportional legacy behaviour.
… viewport Follow-up to the container-query responsive fix (PR #167 review). The toast max-width used 92vw and the drawer panel used max-height: 80vh — both viewport-relative, so in a narrow/short embedded frame (editor mobile preview) they could overflow the player box even though the overlays are now positioned within .appShell. Switch to container-relative units: toast max-width min(92%, 36rem) and drawer panel max-height 80% (of the absolute inset:0 overlay == .appShell). Identical to the previous values when the player fills the viewport.
fix(react): make the player responsive to its own width so the editor…
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
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.
Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
Type of change
Please choose appropriate options.
How Has This Been Tested?
Please describe the tests that you ran to verify your changes in the below checkboxes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
Test Configuration:
Checklist: