From dde8c3acce1d08b49114b0965c87d5e9dbe03565 Mon Sep 17 00:00:00 2001
From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:53:57 +0800
Subject: [PATCH 1/8] Added fullscreen button to playground side content

---
 package.json                        |  1 +
 src/commons/workspace/Workspace.tsx | 21 ++++++++++++++++++++-
 src/styles/_workspace.scss          |  8 ++++++++
 yarn.lock                           |  5 +++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f8ff5b4743..412a459cfc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "@blueprintjs/icons": "^5.5.0",
     "@blueprintjs/popover2": "^2.0.0",
     "@blueprintjs/select": "^5.0.0",
+    "@mantine/hooks": "^7.7.0",
     "@octokit/rest": "^20.0.0",
     "@reduxjs/toolkit": "^1.9.7",
     "@sentry/browser": "^7.57.0",
diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index b15423a4cd..e29d7d89f9 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,4 +1,7 @@
 import { FocusStyleManager } from '@blueprintjs/core';
+import { Icon } from '@blueprintjs/core';
+import { IconNames } from '@blueprintjs/icons';
+import { useFullscreen } from '@mantine/hooks';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
 import { Direction } from 're-resizable/lib/resizer';
 import React from 'react';
@@ -187,6 +190,15 @@ const Workspace: React.FC<WorkspaceProps> = props => {
     </Resizable>
   );
 
+  // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
+  // It returns a ref to attach to the element that should be fullscreened,
+  // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
+  const {
+    ref: fullscreenRef,
+    toggle: toggleFullscreen,
+    fullscreen: isFullscreen
+  } = useFullscreen<HTMLDivElement>();
+
   return (
     <div className="workspace">
       <Prompt
@@ -206,7 +218,14 @@ const Workspace: React.FC<WorkspaceProps> = props => {
         <div className="row content-parent" ref={contentContainerDiv}>
           <div className="editor-divider" ref={editorDividerDiv} />
           <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
-          <div className="right-parent">
+          <div className="right-parent" ref={fullscreenRef}>
+            <Icon
+              id="fullscreen-button"
+              icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+              color="white"
+              htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
+              onClick={toggleFullscreen}
+            />
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 1332cec81d..57383458ee 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -80,6 +80,14 @@ $code-color-notification: #f9f0d7;
     height: 100%;
     padding-bottom: 0.6rem;
     overflow: auto;
+
+    #fullscreen-button {
+      position: absolute;
+      right: 8px;
+      padding: 5px;
+      cursor: pointer;
+      z-index: 100;
+    }
   }
 
   .left-parent {
diff --git a/yarn.lock b/yarn.lock
index 2e33550ecc..ef13527e36 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1924,6 +1924,11 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz#b2ac626d6cb9c8718ab459166d4bb405b8ffa78b"
   integrity sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==
 
+"@mantine/hooks@^7.7.0":
+  version "7.7.1"
+  resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-7.7.1.tgz#04fd8999fe109615d064bf42a8ff04435c93b927"
+  integrity sha512-3YH2FzKMlg840tb04PBDcDXyBCi9puFOxEBVgc6Y/pN6KFqfOoAnQE/YvgOtwSNXZlbTWyDlQoYj+3je7pA7og==
+
 "@mapbox/node-pre-gyp@^1.0.0":
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.10.tgz#8e6735ccebbb1581e5a7e652244cadc8a844d03c"

From b51a01bcb51446dc2111f8a71ef4017c8730ed07 Mon Sep 17 00:00:00 2001
From: Johnwz123 <112536096+Johnwz123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 18:05:37 +0800
Subject: [PATCH 2/8] Refactor fullscreen button to use class as reference and
 Blueprint's Tooltip

---
 src/commons/workspace/Workspace.tsx | 37 ++++++++++++++++++++---------
 src/styles/_workspace.scss          |  2 +-
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index e29d7d89f9..02355afc13 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,5 +1,4 @@
-import { FocusStyleManager } from '@blueprintjs/core';
-import { Icon } from '@blueprintjs/core';
+import { FocusStyleManager, Icon, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { useFullscreen } from '@mantine/hooks';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
@@ -191,7 +190,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
   );
 
   // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
-  // It returns a ref to attach to the element that should be fullscreened,
+  // It returns a ref callback function to attach to the element that should be fullscreened,
   // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
   const {
     ref: fullscreenRef,
@@ -199,6 +198,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
     fullscreen: isFullscreen
   } = useFullscreen<HTMLDivElement>();
 
+  const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const setFullscreenRefs = React.useCallback(
+    (node: HTMLDivElement | null) => {
+      // Refs returned by useRef()
+      fullscreenContainerRef.current = node;
+
+      // Ref callback function from useFullscreen
+      fullscreenRef(node);
+    },
+    [fullscreenRef]
+  );
+
   return (
     <div className="workspace">
       <Prompt
@@ -218,14 +229,18 @@ const Workspace: React.FC<WorkspaceProps> = props => {
         <div className="row content-parent" ref={contentContainerDiv}>
           <div className="editor-divider" ref={editorDividerDiv} />
           <Resizable {...editorResizableProps()}>{createWorkspaceInput(props)}</Resizable>
-          <div className="right-parent" ref={fullscreenRef}>
-            <Icon
-              id="fullscreen-button"
-              icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
-              color="white"
-              htmlTitle={isFullscreen ? 'Exit full screen' : 'Full screen'}
-              onClick={toggleFullscreen}
-            />
+          <div className="right-parent" ref={setFullscreenRefs}>
+            <Tooltip
+              className="fullscreen-button"
+              content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+              portalContainer={fullscreenContainerRef.current || undefined}
+            >
+              <Icon
+                icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
+                color="white"
+                onClick={toggleFullscreen}
+              />
+            </Tooltip>
             {props.sideContentIsResizeable === undefined || props.sideContentIsResizeable
               ? resizableSideContent
               : sideContent}
diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index 57383458ee..d3cd86b8af 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -81,7 +81,7 @@ $code-color-notification: #f9f0d7;
     padding-bottom: 0.6rem;
     overflow: auto;
 
-    #fullscreen-button {
+    .fullscreen-button {
       position: absolute;
       right: 8px;
       padding: 5px;

From 774ed4fbea2e460965ed46c3654675c5577f357c Mon Sep 17 00:00:00 2001
From: henz <henz@comp.nus.edu.sg>
Date: Mon, 8 Apr 2024 21:58:18 +0800
Subject: [PATCH 3/8] updating snapshots

---
 .../AssessmentWorkspace.tsx.snap              | 107 ++++++++++++++++++
 .../__snapshots__/Playground.tsx.snap         |  35 ++++++
 2 files changed, 142 insertions(+)

diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index f8fce30095..1331ef9c7c 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -333,6 +333,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-maximize"
+                tabindex="0"
+              >
+                <svg
+                  data-icon="maximize"
+                  fill="white"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1583,6 +1607,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-maximize"
+                tabindex="0"
+              >
+                <svg
+                  data-icon="maximize"
+                  fill="white"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -2363,6 +2411,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-maximize"
+                tabindex="0"
+              >
+                <svg
+                  data-icon="maximize"
+                  fill="white"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3137,6 +3209,17 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                data-icon="maximize"
+                tabindex="0"
+              />
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -3863,6 +3946,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-maximize"
+                tabindex="0"
+              >
+                <svg
+                  data-icon="maximize"
+                  fill="white"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 250b5fc50b..20da3cf9b5 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -412,6 +412,17 @@ exports[`Playground tests Playground renders correctly 1`] = `
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                data-icon="maximize"
+                tabindex="0"
+              />
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"
@@ -1749,6 +1760,30 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
           <div
             class="right-parent"
           >
+            <span
+              class="fullscreen-button bp5-popover-target"
+            >
+              <span
+                aria-expanded="false"
+                aria-hidden="true"
+                class="bp5-icon bp5-icon-maximize"
+                tabindex="0"
+              >
+                <svg
+                  data-icon="maximize"
+                  fill="white"
+                  height="16"
+                  role="img"
+                  viewBox="0 0 16 16"
+                  width="16"
+                >
+                  <path
+                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </span>
+            </span>
             <div
               class="resize-side-content"
               style="position: relative; user-select: auto; width: auto; height: auto; box-sizing: border-box; flex-shrink: 0;"

From 057cf5527893b3cb70b8e5942073d13d1ce8a21d Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:34:12 +0800
Subject: [PATCH 4/8] Remove unnecessary comments

---
 src/commons/workspace/Workspace.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index 02355afc13..ed9a0058da 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -189,9 +189,6 @@ const Workspace: React.FC<WorkspaceProps> = props => {
     </Resizable>
   );
 
-  // This is a custom hook imported from @mantine/hooks that handles the fullscreen logic
-  // It returns a ref callback function to attach to the element that should be fullscreened,
-  // a function to toggle fullscreen and a boolean indicating whether the element is fullscreen
   const {
     ref: fullscreenRef,
     toggle: toggleFullscreen,
@@ -201,10 +198,7 @@ const Workspace: React.FC<WorkspaceProps> = props => {
   const fullscreenContainerRef = React.useRef<HTMLDivElement | null>(null);
   const setFullscreenRefs = React.useCallback(
     (node: HTMLDivElement | null) => {
-      // Refs returned by useRef()
       fullscreenContainerRef.current = node;
-
-      // Ref callback function from useFullscreen
       fullscreenRef(node);
     },
     [fullscreenRef]

From d79934ab1e43027f8abf459f548158488f9fb2ad Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:39:58 +0800
Subject: [PATCH 5/8] Replace icon with button

For more correct semantics.
---
 src/commons/workspace/Workspace.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/commons/workspace/Workspace.tsx b/src/commons/workspace/Workspace.tsx
index ed9a0058da..93fd2ca8c6 100644
--- a/src/commons/workspace/Workspace.tsx
+++ b/src/commons/workspace/Workspace.tsx
@@ -1,4 +1,4 @@
-import { FocusStyleManager, Icon, Tooltip } from '@blueprintjs/core';
+import { Button, FocusStyleManager, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { useFullscreen } from '@mantine/hooks';
 import { Enable, NumberSize, Resizable, ResizableProps, ResizeCallback } from 're-resizable';
@@ -229,9 +229,9 @@ const Workspace: React.FC<WorkspaceProps> = props => {
               content={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
               portalContainer={fullscreenContainerRef.current || undefined}
             >
-              <Icon
+              <Button
+                minimal
                 icon={isFullscreen ? IconNames.MINIMIZE : IconNames.MAXIMIZE}
-                color="white"
                 onClick={toggleFullscreen}
               />
             </Tooltip>

From 4f258c3f550e25741572eeeb9b67d3abc893549a Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 02:43:04 +0800
Subject: [PATCH 6/8] Remove unnecessary styles

Following the change from icon to button, `cursor: pointer` is no longer
needed.

Also lowered the z-index to a more reasonable value.
---
 src/styles/_workspace.scss | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index d3cd86b8af..ec4f1f9830 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -85,8 +85,7 @@ $code-color-notification: #f9f0d7;
       position: absolute;
       right: 8px;
       padding: 5px;
-      cursor: pointer;
-      z-index: 100;
+      z-index: 10;
     }
   }
 
@@ -154,7 +153,7 @@ $code-color-notification: #f9f0d7;
     }
 
     .ace_breakpoint:before {
-      content: ' \25CF';
+      content: " \25CF";
       margin-left: -10px;
       color: red;
     }
@@ -469,8 +468,8 @@ $code-color-notification: #f9f0d7;
                 * sourcecode, font size modified.
                 */
               font:
-                16px / normal 'Inconsolata',
-                'Consolas',
+                16px / normal "Inconsolata",
+                "Consolas",
                 monospace;
 
               .canvas-container {
@@ -501,7 +500,7 @@ $code-color-notification: #f9f0d7;
     // Set colour of icons in blueprintjs tabs
     color: #a7b6c2;
 
-    &[aria-selected='true'] {
+    &[aria-selected="true"] {
       .side-content-tooltip {
         background-color: #495a6b;
 
@@ -514,7 +513,7 @@ $code-color-notification: #f9f0d7;
       }
     }
 
-    &[aria-disabled='true'] {
+    &[aria-disabled="true"] {
       .side-content-tooltip {
         // Set tooltip colour to always be the same as the background
         background-color: inherit;
@@ -800,8 +799,8 @@ $code-color-notification: #f9f0d7;
           * sourcecode, font size modified.
           */
         font:
-          16px / normal 'Inconsolata',
-          'Consolas',
+          16px / normal "Inconsolata",
+          "Consolas",
           monospace;
       }
 

From b22b75ffb6a4dfd3fc7a5e0a4af52d5d69602880 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 03:10:00 +0800
Subject: [PATCH 7/8] Fix format

---
 src/styles/_workspace.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/styles/_workspace.scss b/src/styles/_workspace.scss
index ec4f1f9830..63af80872f 100755
--- a/src/styles/_workspace.scss
+++ b/src/styles/_workspace.scss
@@ -153,7 +153,7 @@ $code-color-notification: #f9f0d7;
     }
 
     .ace_breakpoint:before {
-      content: " \25CF";
+      content: ' \25CF';
       margin-left: -10px;
       color: red;
     }
@@ -468,8 +468,8 @@ $code-color-notification: #f9f0d7;
                 * sourcecode, font size modified.
                 */
               font:
-                16px / normal "Inconsolata",
-                "Consolas",
+                16px / normal 'Inconsolata',
+                'Consolas',
                 monospace;
 
               .canvas-container {
@@ -500,7 +500,7 @@ $code-color-notification: #f9f0d7;
     // Set colour of icons in blueprintjs tabs
     color: #a7b6c2;
 
-    &[aria-selected="true"] {
+    &[aria-selected='true'] {
       .side-content-tooltip {
         background-color: #495a6b;
 
@@ -513,7 +513,7 @@ $code-color-notification: #f9f0d7;
       }
     }
 
-    &[aria-disabled="true"] {
+    &[aria-disabled='true'] {
       .side-content-tooltip {
         // Set tooltip colour to always be the same as the background
         background-color: inherit;
@@ -799,8 +799,8 @@ $code-color-notification: #f9f0d7;
           * sourcecode, font size modified.
           */
         font:
-          16px / normal "Inconsolata",
-          "Consolas",
+          16px / normal 'Inconsolata',
+          'Consolas',
           monospace;
       }
 

From 81d2559c5ec5be38271a79539a1a62ab63e34b63 Mon Sep 17 00:00:00 2001
From: Richard Dominick <34370238+RichDom2185@users.noreply.github.com>
Date: Thu, 11 Apr 2024 03:20:22 +0800
Subject: [PATCH 8/8] Update test snapshots

---
 .../AssessmentWorkspace.tsx.snap              | 159 ++++++++++--------
 .../__snapshots__/Playground.tsx.snap         |  51 +++---
 2 files changed, 120 insertions(+), 90 deletions(-)

diff --git a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
index 1331ef9c7c..9b9db5f8e7 100644
--- a/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
+++ b/src/commons/assessmentWorkspace/__tests__/__snapshots__/AssessmentWorkspace.tsx.snap
@@ -336,26 +336,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with ContestVoting questio
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
+                type="button"
               >
-                <svg
-                  data-icon="maximize"
-                  fill="white"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
                 >
-                  <path
-                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
             <div
               class="resize-side-content"
@@ -1610,26 +1614,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with MCQ question renders
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
+                type="button"
               >
-                <svg
-                  data-icon="maximize"
-                  fill="white"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
                 >
-                  <path
-                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
             <div
               class="resize-side-content"
@@ -2414,26 +2422,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with overdue assessment re
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
+                type="button"
               >
-                <svg
-                  data-icon="maximize"
-                  fill="white"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
                 >
-                  <path
-                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
             <div
               class="resize-side-content"
@@ -3212,13 +3224,18 @@ exports[`AssessmentWorkspace AssessmentWorkspace page with programming question
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-maximize"
-                data-icon="maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
-              />
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                  data-icon="maximize"
+                />
+              </button>
             </span>
             <div
               class="resize-side-content"
@@ -3949,26 +3966,30 @@ exports[`AssessmentWorkspace AssessmentWorkspace renders Grading tab correctly i
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
+                type="button"
               >
-                <svg
-                  data-icon="maximize"
-                  fill="white"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
                 >
-                  <path
-                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
             <div
               class="resize-side-content"
diff --git a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
index 20da3cf9b5..e0ee8352d6 100644
--- a/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
+++ b/src/pages/playground/__tests__/__snapshots__/Playground.tsx.snap
@@ -415,13 +415,18 @@ exports[`Playground tests Playground renders correctly 1`] = `
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-standard bp5-icon-maximize"
-                data-icon="maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
-              />
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-standard bp5-icon-maximize"
+                  data-icon="maximize"
+                />
+              </button>
             </span>
             <div
               class="resize-side-content"
@@ -1763,26 +1768,30 @@ exports[`Playground tests Playground with link renders correctly 1`] = `
             <span
               class="fullscreen-button bp5-popover-target"
             >
-              <span
+              <button
                 aria-expanded="false"
-                aria-hidden="true"
-                class="bp5-icon bp5-icon-maximize"
+                class="bp5-button bp5-minimal"
                 tabindex="0"
+                type="button"
               >
-                <svg
-                  data-icon="maximize"
-                  fill="white"
-                  height="16"
-                  role="img"
-                  viewBox="0 0 16 16"
-                  width="16"
+                <span
+                  aria-hidden="true"
+                  class="bp5-icon bp5-icon-maximize"
                 >
-                  <path
-                    d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
-                    fill-rule="evenodd"
-                  />
-                </svg>
-              </span>
+                  <svg
+                    data-icon="maximize"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                  >
+                    <path
+                      d="M5.99 8.99c-.28 0-.53.11-.71.29l-3.29 3.29v-1.59c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1H3.41L6.7 10.7a1.003 1.003 0 00-.71-1.71zm9-9h-4c-.55 0-1 .45-1 1s.45 1 1 1h1.59l-3.3 3.3a.99.99 0 00-.29.7 1.003 1.003 0 001.71.71l3.29-3.29V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.56-.45-1.01-1-1.01z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                </span>
+              </button>
             </span>
             <div
               class="resize-side-content"