diff --git a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap index 086e0401..5e8f7357 100644 --- a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap +++ b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap @@ -15,7 +15,7 @@ exports[`Info Popover Component snapshot 1`] = ` } - placement="right-end" + placement="left-end" trigger="focus" > ( diff --git a/src/containers/ListView/ListView.scss b/src/containers/ListView/ListView.scss index a51fcc7e..6ea1bf60 100644 --- a/src/containers/ListView/ListView.scss +++ b/src/containers/ListView/ListView.scss @@ -25,4 +25,14 @@ span.pgn__icon.breadcrumb-arrow { margin-bottom: 0; } } + + @include media-breakpoint-down(xs) { + .badge { + white-space: normal; + } + + .pgn__table-actions > div:first-of-type { + z-index: $zindex-modal !important; + } + } } diff --git a/src/containers/ReviewActions/ReviewActions.scss b/src/containers/ReviewActions/ReviewActions.scss index 1fde9801..52b48f42 100644 --- a/src/containers/ReviewActions/ReviewActions.scss +++ b/src/containers/ReviewActions/ReviewActions.scss @@ -34,4 +34,10 @@ .review-actions-username { padding-bottom: map-get($spacers, 3); } -} \ No newline at end of file +} + +@include media-breakpoint-down(xs) { + .overlay-help-popover { + max-width: calc(100% - 60px) !important; + } +} diff --git a/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap b/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap index a8a7bf71..71f262eb 100644 --- a/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap +++ b/src/containers/ReviewActions/__snapshots__/index.test.jsx.snap @@ -18,7 +18,7 @@ exports[`ReviewActions component component snapshot: do not show rubric 1`] = ` status="grading-status" />
)} - + {pointsPossible && ( @@ -9,10 +10,16 @@ exports[`ReviewModal component component snapshots closed 1`] = ` } className="review-modal" + closeLabel="Close" + footerNode={null} + hasCloseButton={true} + isFullscreenScroll={false} isOpen={false} modalBodyClassName="review-modal-body" onClose={[MockFunction hooks.onClose]} + size="fullscreen" title="test-ora-name" + variant="dark" > @@ -29,10 +37,16 @@ exports[`ReviewModal component component snapshots loading 1`] = ` } className="review-modal" + closeLabel="Close" + footerNode={null} + hasCloseButton={true} + isFullscreenScroll={false} isOpen={true} modalBodyClassName="review-modal-body" onClose={[MockFunction hooks.onClose]} + size="fullscreen" title="test-ora-name" + variant="dark" > @@ -59,10 +74,16 @@ exports[`ReviewModal component component snapshots success 1`] = ` } className="review-modal" + closeLabel="Close" + footerNode={null} + hasCloseButton={true} + isFullscreenScroll={false} isOpen={true} modalBodyClassName="review-modal-body" onClose={[MockFunction hooks.onClose]} + size="fullscreen" title="test-ora-name" + variant="dark" > { isOpen, closeConfirmModalProps, } = hooks.rendererHooks({ dispatch, intl }); + + const isMobile = useMediaQuery({ query: '(max-width: 575.98px)' }); + return ( {title} : title} isOpen={isOpen} beforeBodyNode={( <> diff --git a/src/containers/ReviewModal/index.test.jsx b/src/containers/ReviewModal/index.test.jsx index 168853f7..940b7aa0 100644 --- a/src/containers/ReviewModal/index.test.jsx +++ b/src/containers/ReviewModal/index.test.jsx @@ -19,6 +19,11 @@ jest.mock('./hooks', () => ({ rendererHooks: jest.fn(), })); +jest.mock('@edx/paragon', () => ({ + ...jest.requireActual('@edx/paragon'), + useMediaQuery: jest.fn(), +})); + const dispatch = useDispatch(); describe('ReviewModal component', () => {