diff --git a/.eslintrc.js b/.eslintrc.js
index 00ba97fc8..d7e76996d 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -6,9 +6,9 @@ const config = createConfig('eslint', {
     'import/no-named-as-default-member': 'off',
     'import/no-import-module-exports': 'off',
     'import/no-self-import': 'off',
-    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+    'spaced-comment': ['error', 'always', { block: { exceptions: ['*'] } }],
     'react-hooks/rules-of-hooks': 'off',
-    "react/forbid-prop-types": ["error", { "forbid": ["any", "array"] }], // arguable object proptype is use when I do not care about the shape of the object
+    'react/forbid-prop-types': ['error', { forbid: ['any', 'array'] }], // arguable object proptype is use when I do not care about the shape of the object
     'no-import-assign': 'off',
     'no-promise-executor-return': 'off',
     'import/no-cycle': 'off',
@@ -16,10 +16,10 @@ const config = createConfig('eslint', {
 });
 
 config.settings = {
-  "import/resolver": {
+  'import/resolver': {
     node: {
-      paths: ["src", "node_modules"],
-      extensions: [".js", ".jsx"],
+      paths: ['src', 'node_modules'],
+      extensions: ['.js', '.jsx'],
     },
   },
 };
diff --git a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap
index 086e04013..5e8f7357d 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`] = `
       </Popover.Content>
     </Popover>
   }
-  placement="right-end"
+  placement="left-end"
   trigger="focus"
 >
   <IconButton
diff --git a/src/components/InfoPopover/index.jsx b/src/components/InfoPopover/index.jsx
index 276ed11b2..38592d69f 100644
--- a/src/components/InfoPopover/index.jsx
+++ b/src/components/InfoPopover/index.jsx
@@ -20,7 +20,7 @@ import messages from './messages';
 export const InfoPopover = ({ onClick, children, intl }) => (
   <OverlayTrigger
     trigger="focus"
-    placement="right-end"
+    placement="left-end"
     flip
     overlay={(
       <Popover id="info-popover" className="overlay-help-popover">
diff --git a/src/containers/ListView/ListView.scss b/src/containers/ListView/ListView.scss
index a51fcc7ed..6ea1bf608 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 1fde9801e..52b48f428 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 a8a7bf71d..71f262ebb 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"
       />
       <span
-        className="small"
+        className="small text-nowrap"
       >
         <FormattedMessage
           defaultMessage="Score: {pointsEarned}/{pointsPossible}"
@@ -71,7 +71,7 @@ exports[`ReviewActions component component snapshot: loading 1`] = `
         status="grading-status"
       />
       <span
-        className="small"
+        className="small text-nowrap"
       >
         <FormattedMessage
           defaultMessage="Score: {pointsEarned}/{pointsPossible}"
@@ -113,7 +113,7 @@ exports[`ReviewActions component component snapshot: show rubric, no score 1`] =
         status="grading-status"
       />
       <span
-        className="small"
+        className="small text-nowrap"
       />
     </span>
     <div
diff --git a/src/containers/ReviewActions/index.jsx b/src/containers/ReviewActions/index.jsx
index 72936d324..ed32a700d 100644
--- a/src/containers/ReviewActions/index.jsx
+++ b/src/containers/ReviewActions/index.jsx
@@ -30,7 +30,7 @@ export const ReviewActions = ({
         { gradingStatus && (
           <StatusBadge className="review-actions-status mr-3" status={gradingStatus} />
         )}
-        <span className="small">
+        <span className="small text-nowrap">
           {pointsPossible && (
             <FormattedMessage
               {...messages.pointsDisplay}
diff --git a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap
index 0f4ee2848..3d0ef792c 100644
--- a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap
+++ b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap
@@ -2,6 +2,7 @@
 
 exports[`ReviewModal component component snapshots closed 1`] = `
 <FullscreenModal
+  afterBodyNode={null}
   beforeBodyNode={
     <React.Fragment>
       <ReviewActions />
@@ -9,10 +10,16 @@ exports[`ReviewModal component component snapshots closed 1`] = `
     </React.Fragment>
   }
   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"
 >
   <CloseReviewConfirmModal
     prop="hooks.closeConfirmModalProps"
@@ -22,6 +29,7 @@ exports[`ReviewModal component component snapshots closed 1`] = `
 
 exports[`ReviewModal component component snapshots loading 1`] = `
 <FullscreenModal
+  afterBodyNode={null}
   beforeBodyNode={
     <React.Fragment>
       <ReviewActions />
@@ -29,10 +37,16 @@ exports[`ReviewModal component component snapshots loading 1`] = `
     </React.Fragment>
   }
   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"
 >
   <ReviewContent />
   <LoadingMessage
@@ -52,6 +66,7 @@ exports[`ReviewModal component component snapshots loading 1`] = `
 
 exports[`ReviewModal component component snapshots success 1`] = `
 <FullscreenModal
+  afterBodyNode={null}
   beforeBodyNode={
     <React.Fragment>
       <ReviewActions />
@@ -59,10 +74,16 @@ exports[`ReviewModal component component snapshots success 1`] = `
     </React.Fragment>
   }
   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"
 >
   <ReviewContent />
   <CloseReviewConfirmModal
diff --git a/src/containers/ReviewModal/index.jsx b/src/containers/ReviewModal/index.jsx
index d0efbd80f..d916defaf 100644
--- a/src/containers/ReviewModal/index.jsx
+++ b/src/containers/ReviewModal/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 
-import { FullscreenModal } from '@edx/paragon';
+import { FullscreenModal, Truncate, useMediaQuery } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import LoadingMessage from 'components/LoadingMessage';
@@ -27,9 +27,12 @@ export const ReviewModal = ({ intl }) => {
     isOpen,
     closeConfirmModalProps,
   } = hooks.rendererHooks({ dispatch, intl });
+
+  const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
+
   return (
     <FullscreenModal
-      title={title}
+      title={isMobile ? <Truncate lines={3}>{title}</Truncate> : title}
       isOpen={isOpen}
       beforeBodyNode={(
         <>
diff --git a/src/containers/ReviewModal/index.test.jsx b/src/containers/ReviewModal/index.test.jsx
index 168853f7f..940b7aa04 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', () => {