fix: image rendering and blockquote styles (#333)

src/App.scss

@@ -46,7 +46,22 @@ $input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get up
       right: 1rem !important;
     }
   }
+
   .confirm-modal .pgn__modal-body {
     overflow: hidden;
   }
+
+  .pgn__modal-body-content {
+    & img {
+      object-fit: contain;
+      max-width: 100%;
+      height: auto;
+    }
+
+    & blockquote > p {
+      border-left: 2px solid var(--pgn-color-gray-200);
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+    }
+  }
 }

src/containers/ResponseDisplay/index.jsx

@@ -11,6 +11,7 @@ import parse from 'html-react-parser';
 import { selectors } from 'data/redux';
 import { fileUploadResponseOptions } from 'data/services/lms/constants';
 
+import { getConfig } from '@edx/frontend-platform';
 import SubmissionFiles from './SubmissionFiles';
 import PreviewDisplay from './PreviewDisplay';
 
@@ -26,7 +27,13 @@ export class ResponseDisplay extends React.Component {
   }
 
   get textContents() {
-    return this.props.response.text.map(text => parse(this.purify.sanitize(text)));
+    const { text } = this.props.response;
+
+    const formattedText = text
+      .map((item) => item.replaceAll(/\.\.\/asset/g, `${getConfig().LMS_BASE_URL}/asset`))
+      .map((item) => parse(this.purify.sanitize(item)));
+
+    return formattedText;
   }
 
   get submittedFiles() {