Mobile Bug fix

src/commons/assessmentWorkspace/AssessmentWorkspace.tsx

@@ -320,14 +320,19 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
       {
         label: `Task ${questionId + 1}`,
         iconName: IconNames.NINJA,
-        body: <Markdown content={props.assessment!.questions[questionId].content} />,
+        body: (
+          <Markdown
+            className="sidecontent-overview"
+            content={props.assessment!.questions[questionId].content}
+          />
+        ),
         id: SideContentType.questionOverview,
         toSpawn: () => true
       },
       {
         label: `${props.assessment!.category} Briefing`,
         iconName: IconNames.BRIEFCASE,
-        body: <Markdown content={props.assessment!.longSummary} />,
+        body: <Markdown className="sidecontent-overview" content={props.assessment!.longSummary} />,
         id: SideContentType.briefing,
         toSpawn: () => true
       },

src/styles/_academy.scss

@@ -132,6 +132,7 @@
           max-height: 52px;
           overflow-y: auto;
           font-size: 12px;
+          margin: 0.5rem 0;
           .#{$ns}-running-text {
             font-size: 12px;
           }
@@ -177,6 +178,7 @@
       height: 100%;
       width: 100%;
       object-fit: cover;
+      border-radius: 3px 0 0 3px;
     }
 
     img.cover-image-submitted {
@@ -233,9 +235,6 @@
     flex-shrink: 0;
     /* Creates space between the description text, buttons and title */
     margin: 0.5rem 0rem 0.5rem 0.5rem;
-    @media only screen and (max-width: 768px) {
-      margin: 0.5rem 0;
-    }
 
     & > * {
       /* Limit height of description on smaller screens */

src/styles/_workspace.scss

@@ -38,8 +38,11 @@ $code-color-error: #ff4444;
     margin-right: 0.5rem;
     margin-top: 0.5rem;
     margin-bottom: 0.6rem;
-    overflow-x: auto;
-    overflow-y: hidden;
+
+    @media screen and (max-width: 768px) {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
 
     @media screen and (min-width: 769px) {
       .ControlBar_editingWorkspace {
@@ -584,6 +587,34 @@ $code-color-error: #ff4444;
     }
   }
 
+  .sidecontent-overview {
+    // fix overflow for assessment sidecontent
+
+    pre {
+      // for code block in pre
+      overflow-x: auto;
+    }
+
+    ::-webkit-scrollbar {
+      height: 4px;
+    }
+    ::-webkit-scrollbar-track {
+      border-radius: 2px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: $cadet-color-4;
+      border-radius: 2px;
+    }
+
+    p {
+      // for image in p
+      img {
+        max-width: 100%;
+        object-fit: contain;
+      }
+    }
+  }
+
   .side-content-tooltip {
     border-radius: 3px;
     // size of rounded box under tab icon