fix: make student response persist break line on display (openedx#125)

* fix: make student response persist break line on display

* chore: scroll bug when selecting text

Author: leangseu-edx

src/containers/ResponseDisplay/ResponseDisplay.scss

@@ -43,6 +43,11 @@
   .preview-display {
     padding: map-get($spacers, 3) 0;
   }
+
+  .response-display-text-content {
+    white-space: pre-line;
+    overflow: hidden;
+  }
 }
 
 @include media-breakpoint-down(sm) {

src/containers/ResponseDisplay/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,9 @@ exports[`ResponseDisplay component snapshot file upload disable with valid respo
   className="response-display"
 >
   <Card>
-    <Card.Body>
+    <Card.Body
+      className="response-display-text-content"
+    >
       parsed html (sanitized (some text response here))
     </Card.Body>
   </Card>
@@ -62,7 +64,9 @@ exports[`ResponseDisplay component snapshot file upload enable with valid respon
     }
   />
   <Card>
-    <Card.Body>
+    <Card.Body
+      className="response-display-text-content"
+    >
       parsed html (sanitized (some text response here))
     </Card.Body>
   </Card>

src/containers/ResponseDisplay/index.jsx

@@ -48,7 +48,7 @@ export class ResponseDisplay extends React.Component {
           /*  eslint-disable react/no-array-index-key */
           this.textContents.map((textContent, index) => (
             <Card key={index}>
-              <Card.Body>{textContent}</Card.Body>
+              <Card.Body className="response-display-text-content">{textContent}</Card.Body>
             </Card>
           ))
         }