fix tutorial assessment view

src/components/CodeEditor/CodeEditor.js

@@ -161,7 +161,7 @@ void loop() {
             {`${error}`}{" "}
           </p>
         </Drawer>
-        <Grid item lg={8}>
+        <Grid item lg={8} md={8}>
           <div style={{ display: "flex", alignItems: "center" }}>
             <h1>Code Editor</h1>
             <SaveIcon loading={autoSave} />
@@ -193,7 +193,7 @@ void loop() {
             }}
           />
         </Grid>
-        <Grid item lg={4}>
+        <Grid item lg={4} md={4}>
           <Button
             style={{ padding: "1rem", margin: "1rem" }}
             variant="contained"

src/components/CodeEditor/Sidebar.js

@@ -8,12 +8,10 @@ import Typography from "@material-ui/core/Typography";
 import { LibraryVersions } from "../../data/versions.js";
 import { useMonaco } from "@monaco-editor/react";
 import { Button } from "@material-ui/core";
-import Dialog from "../Dialog";
 import SerialMonitor from "./SerialMonitor.js";
 import axios from "axios";
 
 const Sidebar = () => {
-  const [alert, setAlert] = React.useState(false);
   //const [examples, setExamples] = React.useState([]);
   const user = useSelector((state) => state.auth.user);
   // useEffect(() => {
@@ -28,10 +26,6 @@ const Sidebar = () => {
     monaco.editor.getModels()[0].setValue(code);
   };
 
-  const toggleDialog = () => {
-    setAlert(false);
-  };
-
   const getOsemScript = (id) => {
     axios
       .get(`https://api.opensensemap.org/boxes/${id}/script/`)
@@ -138,25 +132,6 @@ const Sidebar = () => {
             })}
           </Typography>
         </AccordionDetails>
-        <Dialog
-          style={{ zIndex: 9999999 }}
-          fullWidth
-          maxWidth={"sm"}
-          open={alert}
-          title={Blockly.Msg.tabletDialog_headline}
-          content={""}
-          onClose={() => toggleDialog()}
-          onClick={() => toggleDialog()}
-          button={Blockly.Msg.button_close}
-        >
-          <div>{Blockly.Msg.tabletDialog_text}</div>
-          <div>
-            {Blockly.Msg.tabletDialog_more}{" "}
-            <a href="https://sensebox.de/app" target="_blank" rel="noreferrer">
-              https://sensebox.de/app
-            </a>
-          </div>
-        </Dialog>
       </Accordion>
     </div>
   );

src/components/Tutorial/Assessment.js

@@ -86,49 +86,7 @@ class Assessment extends Component {
           <Grid
             item
             xs={12}
-            md={6}
+            md={this.state.codeOn ? 6 : 9}
-            lg={3}
-            style={{
-              position: "relative",
-              // isWidthDown("sm", this.props.width)
-              //   ? { height: "max-content" }
-              //   : {}
-            }}
-          >
-            <Card
-              style={{
-                height: "calc(45vH - 30px)",
-                padding: "10px",
-                marginBottom: "10px",
-              }}
-            >
-              <Typography>
-                <ReactMarkdown remarkPlugins={[remarkGfm, remarkGemoji]}>
-                  {currentTask.text}
-                </ReactMarkdown>
-              </Typography>
-            </Card>
-            <Card
-              style={{
-                height: "20vH",
-                padding: "10px",
-                marginBottom: "10px",
-              }}
-            >
-              <TooltipViewer />
-            </Card>
-            <div
-              style={
-                isWidthDown("sm", this.props.width)
-                  ? { height: "500px" }
-                  : { height: "50%" }
-              }
-            ></div>
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            md={this.state.codeOn ? 6 : 6}
             lg={this.state.codeOn ? 6 : 9}
             style={{ position: "relative" }}
           >
@@ -169,6 +127,48 @@ class Assessment extends Component {
               <CodeViewer />
             </Grid>
           ) : null}
+          <Grid
+            item
+            xs={12}
+            md={3}
+            lg={3}
+            style={{
+              position: "relative",
+              // isWidthDown("sm", this.props.width)
+              //   ? { height: "max-content" }
+              //   : {}
+            }}
+          >
+            <Card
+              style={{
+                height: "calc(44vH - 35px)",
+                padding: "10px",
+                marginBottom: "10px",
+              }}
+            >
+              <Typography>
+                <ReactMarkdown remarkPlugins={[remarkGfm, remarkGemoji]}>
+                  {currentTask.text}
+                </ReactMarkdown>
+              </Typography>
+            </Card>
+            {/* <Card
+              style={{
+                height: "20vH",
+                padding: "10px",
+                marginBottom: "10px",
+              }}
+            > */}
+            <TooltipViewer />
+            {/* </Card> */}
+            <div
+              style={
+                isWidthDown("sm", this.props.width)
+                  ? { height: "500px" }
+                  : { height: "50%" }
+              }
+            ></div>
+          </Grid>
         </Grid>
       </div>
     );