diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js index ace395a276..831d38b098 100644 --- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js +++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js @@ -50,12 +50,6 @@ const useIFrameBehavior = ({ if (type === messageTypes.resize) { setIframeHeight(payload.height); - // We observe exit from the video xblock fullscreen mode - // and scroll to the previously saved scroll position - if (windowTopOffset !== null) { - window.scrollTo(0, Number(windowTopOffset)); - } - if (!hasLoaded && iframeHeight === 0 && payload.height > 0) { setHasLoaded(true); if (onLoaded) { @@ -63,6 +57,12 @@ const useIFrameBehavior = ({ } } } else if (type === messageTypes.videoFullScreen) { + // We observe exit from the video xblock fullscreen mode + // and scroll to the previously saved scroll position + if (!payload.open && windowTopOffset !== null) { + window.scrollTo(0, Number(windowTopOffset)); + } + // We listen for this message from LMS to know when we need to // save or reset scroll position on toggle video xblock fullscreen mode setWindowTopOffset(payload.open ? window.scrollY : null); diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js index a5e5b6f34e..d9450c6ddd 100644 --- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js +++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js @@ -154,6 +154,9 @@ describe('useIFrameBehavior hook', () => { const resizeMessage = (height = 23) => ({ data: { type: messageTypes.resize, payload: { height } }, }); + const videoFullScreenMessage = (open = false) => ({ + data: { type: messageTypes.videoFullScreen, payload: { open } }, + }); const testSetIFrameHeight = (height = 23) => { const { cb } = useEventListener.mock.calls[0][1]; cb(resizeMessage(height)); @@ -209,7 +212,7 @@ describe('useIFrameBehavior hook', () => { state.mockVals({ ...defaultStateVals, windowTopOffset }); hook = useIFrameBehavior(props); const { cb } = useEventListener.mock.calls[0][1]; - cb(resizeMessage()); + cb(videoFullScreenMessage()); expect(window.scrollTo).toHaveBeenCalledWith(0, windowTopOffset); }); it('does not scroll if towverticalp offset is not set', () => { diff --git a/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss new file mode 100644 index 0000000000..fe94248b26 --- /dev/null +++ b/src/courseware/course/sidebar/sidebars/discussions/Discussions.scss @@ -0,0 +1,5 @@ +.discussions-sidebar-frame { + @media (max-width: -1 + map-get($grid-breakpoints, "xl")) { + max-height: calc(100vh - 65px); + } +} diff --git a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx index 3e98d465e1..5fcee1e1ae 100644 --- a/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx +++ b/src/courseware/course/sidebar/sidebars/discussions/DiscussionsSidebar.jsx @@ -32,7 +32,7 @@ const DiscussionsSidebar = ({ intl }) => { > <iframe src={`${discussionsUrl}?inContextSidebar`} - className="d-flex w-100 h-100 border-0" + className="d-flex w-100 h-100 border-0 discussions-sidebar-frame" title={intl.formatMessage(messages.discussionsTitle)} allow="clipboard-write" loading="lazy" diff --git a/src/generic/upgrade-notification/UpgradeNotification.scss b/src/generic/upgrade-notification/UpgradeNotification.scss index 85d3509b57..2f2dcdbd84 100644 --- a/src/generic/upgrade-notification/UpgradeNotification.scss +++ b/src/generic/upgrade-notification/UpgradeNotification.scss @@ -22,9 +22,8 @@ // An additional Font Awesome stylesheet is imported by Braze in // stage/production but not devstack. .upgrade-notification-ul.fa-ul { - padding-left: 1.25rem; - padding-top: 0.875rem; - padding-right: 1.25rem; + padding: 0.875rem 1.25rem 0; + margin: 0 0 1rem 2.5rem; } .upgrade-notification-text { diff --git a/src/index.scss b/src/index.scss index 5be290a9b3..9ac5a39985 100755 --- a/src/index.scss +++ b/src/index.scss @@ -393,6 +393,7 @@ // Import component-specific sass files @import "courseware/course/celebration/CelebrationModal.scss"; +@import "courseware/course/sidebar/sidebars/discussions/Discussions.scss"; @import "courseware/course/sidebar/sidebars/notifications/NotificationIcon.scss"; @import "courseware/course/sequence/lock-paywall/LockPaywall.scss"; @import "shared/streak-celebration/StreakCelebrationModal.scss"; @@ -402,7 +403,7 @@ @import "generic/upgrade-notification/UpgradeNotification.scss"; @import "generic/upsell-bullets/UpsellBullets.scss"; @import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss"; -@import "src/course-home/outline-tab/widgets/FlagButton.scss"; +@import "course-home/outline-tab/widgets/FlagButton.scss"; @import "course-home/progress-tab/course-completion/CompletionDonutChart.scss"; @import "course-home/progress-tab/grades/course-grade/GradeBar.scss"; @import "courseware/course/course-exit/CourseRecommendations";