429 responsive exercise2 (#449)

* Refactoring execise 2 code to make it responsive, tried to make the less changes possible

* "Fix lint errors"

* "Correct mistake"

src/components/SelectCode.tsx

@@ -3,8 +3,8 @@ import FormControl from '@mui/material/FormControl';
 import MenuItem from '@mui/material/MenuItem';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
 import * as React from 'react';
-
 import { useState } from 'react';
+import '../styles/SelectCode.scss'; // Import the SCSS file for styles
 
 interface SelectCodeProps {
   choices: string[];
@@ -20,24 +20,21 @@ const SelectCode: React.FC<SelectCodeProps> = ({ choices, handleClick }) => {
   };
 
   return (
-    <Box sx={{ width: 'fit-content', height: '5vh', fontFamily: 'monospace' }}>
-      <FormControl fullWidth>
+    <Box className="select-box" sx={{ fontFamily: 'monospace' }}>
+      <FormControl fullWidth className="form-control">
         <Select
           value={display}
           onChange={handleChange}
           displayEmpty
           inputProps={{ 'aria-label': 'Without label' }}
-          sx={{
-            fontFamily: 'monospace',
-            borderColor: '#CFCFCF',
-            border: '12px',
-          }}
+          className="select-input"
         >
           {choices.map((choice, index) => (
             <MenuItem
               value={choice}
               key={index}
-              sx={{ fontFamily: 'monospace' }}
+              className="menu-item"
+              sx={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
             >
               {choice}
             </MenuItem>

src/styles/Exercise2.scss

@@ -9,6 +9,14 @@
   img {
     width: 65vw;
   }
+
+  @media only screen and (max-width: 850px) {
+    align-items: center;
+    display: grid;
+    justify-items: center;
+
+    margin: 0;
+  }
 }
 
 .exercise2-div {

src/styles/RunCode.scss

@@ -6,13 +6,23 @@
   padding: 4rem;
   position: relative;
   width: 75vw;
+
+  @media only screen and (max-width: 850px) {
+    padding: 2rem; // Reduce padding for small screens
+    width: 90vw; // Increase width for small screens
+  }
 }
 
 .code-select {
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: 5rem;
+  gap: 5rem; // This controls the horizontal spacing on larger screens
+
+  @media only screen and (max-width: 850px) {
+    flex-direction: column; // Stacks elements vertically for small screens
+    gap: 1rem; // Adjusts vertical spacing for small screens, but you might want to reduce or remove this for horizontal spacing
+  }
 }
 
 .run-button {
@@ -33,5 +43,14 @@
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
+    text-align: center;
+
+    @media only screen and (max-width: 850px) {
+      padding-top: 0;
+    }
+  }
+
+  @media only screen and (max-width: 850px) {
+    position: static; // Make button static for small screens
   }
 }

src/styles/SelectCode.scss

@@ -0,0 +1,27 @@
+.select-box {
+  border: 1px;
+  border-color: #cfcfcf;
+  font-size: 1.6vw;
+  height: 5vh;
+  width: fit-content;
+
+  @media (max-width: 600px) {
+    font-size: 4vw;
+    height: auto;
+    width: 100%;
+  }
+}
+
+.select-input {
+  @media (max-width: 600px) {
+    font-size: 3.5vw;
+  }
+}
+
+.menu-item {
+  @media (max-width: 600px) {
+    font-size: 3.5vw;
+    white-space: normal;
+    word-wrap: break-word;
+  }
+}