Patch responsive

src/components/Editor/index.jsx

@@ -64,7 +64,7 @@ export default function Editor() {
                 value={code || defaultMsg}
                 showPrintMargin={false}
                 height="100vh"
-                width="50vw"
+                width="100%"
                 name="editor"
                 annotations={[annotation]}
                 editorProps={{ $blockScrolling: true }}

src/components/Emulator/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
 import Display from 'components/Display';
@@ -10,19 +10,53 @@ const useStyles = makeStyles((theme) => ({
         textAlign: 'center',
         color: theme.palette.text.primary,
         backgroundColor: theme.palette.background.main,
-        height: '100vh',
+        height: '100%',
         display: 'flex',
         flexDirection: 'column',
     },
+    buttonsContainer: {
+        background: theme.palette.background.main,
+        color: theme.palette.text.primary,
+        padding: '.5rem',
+    },
+    buttonWrapper: {
+        display: 'flex',
+        backgroundColor: theme.palette.background.raised,
+        borderRadius: '0.5rem',
+        width: 'auto',
+        padding: '5px 2px',
+        justifyContent: 'center',
+    },
+    button: {
+        cursor: 'ponter',
+        padding: '0.4rem 0.8rem',
+        outline: 'none',
+        display: 'inline-block',
+        textAlign: 'center',
+        background: 'transparent',
+        color: theme.palette.text.primary,
+        border: 'none',
+    },
 }));
 
 export default function Emulator() {
+    const [toggle, setToggle] = useState(false);
+
     const classes = useStyles();
 
     return (
         <Paper className={classes.paper}>
             <Display />
-            <RegAndMem />
+
+            <div className={classes.buttonsContainer}>
+                <div className={classes.buttonWrapper}>
+                    <button type="button" className={classes.button} onClick={() => setToggle((s) => !s)}>
+                        Mostrar Detalles
+                    </button>
+                </div>
+            </div>
+
+            { toggle && <RegAndMem /> }
         </Paper>
     );
 }

src/pages/Home/index.jsx

@@ -20,10 +20,10 @@ export default function Home() {
     return (
         <div className={classes.root}>
             <Grid container spacing={1}>
-                <Grid item xs={6}>
+                <Grid item xs={12} md={6}>
                     <Emulator />
                 </Grid>
-                <Grid item xs={6}>
+                <Grid item xs={12} md={6}>
                     <Editor />
                 </Grid>
             </Grid>