From b422c871513275ca0c39f1ae6a3e6b6acc63ea71 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 12 Jun 2024 17:44:13 +0300
Subject: [PATCH] feat: ora mobile responsive

---
 .../__snapshots__/index.test.jsx.snap         |  2 +-
 src/components/InfoPopover/index.jsx          |  2 +-
 src/containers/ListView/ListView.scss         | 10 +++
 .../ReviewActions/ReviewActions.scss          |  8 ++-
 .../__snapshots__/index.test.jsx.snap         |  6 +-
 src/containers/ReviewActions/index.jsx        |  2 +-
 .../__snapshots__/index.test.jsx.snap         | 71 +------------------
 src/containers/ReviewModal/index.jsx          |  7 +-
 8 files changed, 31 insertions(+), 77 deletions(-)

diff --git a/src/components/InfoPopover/__snapshots__/index.test.jsx.snap b/src/components/InfoPopover/__snapshots__/index.test.jsx.snap
index 89c14c12..9caaf7cf 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 7af916db..6c402014 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 55096220..d4c664b9 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 88370b5a..460bf4c5 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 18522f7e..82c25e39 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}"
@@ -73,7 +73,7 @@ exports[`ReviewActions component component snapshot: loading 1`] = `
         status="grading-status"
       />
       <span
-        className="small"
+        className="small text-nowrap"
       >
         <FormattedMessage
           defaultMessage="Score: {pointsEarned}/{pointsPossible}"
@@ -115,7 +115,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 33839720..3633894a 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 0f4ee284..ab6274a2 100644
--- a/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap
+++ b/src/containers/ReviewModal/__snapshots__/index.test.jsx.snap
@@ -1,72 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReviewModal component component snapshots closed 1`] = `
-<FullscreenModal
-  beforeBodyNode={
-    <React.Fragment>
-      <ReviewActions />
-      <DemoWarning />
-    </React.Fragment>
-  }
-  className="review-modal"
-  isOpen={false}
-  modalBodyClassName="review-modal-body"
-  onClose={[MockFunction hooks.onClose]}
-  title="test-ora-name"
->
-  <CloseReviewConfirmModal
-    prop="hooks.closeConfirmModalProps"
-  />
-</FullscreenModal>
-`;
+exports[`ReviewModal component component snapshots closed 1`] = `undefined`;
 
-exports[`ReviewModal component component snapshots loading 1`] = `
-<FullscreenModal
-  beforeBodyNode={
-    <React.Fragment>
-      <ReviewActions />
-      <DemoWarning />
-    </React.Fragment>
-  }
-  className="review-modal"
-  isOpen={true}
-  modalBodyClassName="review-modal-body"
-  onClose={[MockFunction hooks.onClose]}
-  title="test-ora-name"
->
-  <ReviewContent />
-  <LoadingMessage
-    message={
-      Object {
-        "defaultMessage": "Loading response",
-        "description": "loading text for submission response review screen",
-        "id": "ora-grading.ReviewModal.loadingResponse",
-      }
-    }
-  />
-  <CloseReviewConfirmModal
-    prop="hooks.closeConfirmModalProps"
-  />
-</FullscreenModal>
-`;
+exports[`ReviewModal component component snapshots loading 1`] = `undefined`;
 
-exports[`ReviewModal component component snapshots success 1`] = `
-<FullscreenModal
-  beforeBodyNode={
-    <React.Fragment>
-      <ReviewActions />
-      <DemoWarning />
-    </React.Fragment>
-  }
-  className="review-modal"
-  isOpen={true}
-  modalBodyClassName="review-modal-body"
-  onClose={[MockFunction hooks.onClose]}
-  title="test-ora-name"
->
-  <ReviewContent />
-  <CloseReviewConfirmModal
-    prop="hooks.closeConfirmModalProps"
-  />
-</FullscreenModal>
-`;
+exports[`ReviewModal component component snapshots success 1`] = `undefined`;
diff --git a/src/containers/ReviewModal/index.jsx b/src/containers/ReviewModal/index.jsx
index 8fc18005..0687f87e 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 '@openedx/paragon';
+import { FullscreenModal, Truncate, useMediaQuery } from '@openedx/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: 575.98px)' });
+
   return (
     <FullscreenModal
-      title={title}
+      title={isMobile ? <Truncate lines={3}>{title}</Truncate> : title}
       isOpen={isOpen}
       beforeBodyNode={(
         <>