Merge pull request #793 from rvsia/fixCodeEditorWidths

Fix code editor width to keep menu the same

Author: Hyperkid123

packages/react-renderer-demo/src/components/code-editor/index.js

@@ -39,7 +39,7 @@ const useStylesCode = makeStyles((theme) => ({
     position: 'relative',
     maxWidth: '100%',
     [theme.breakpoints.down('sm')]: {
-      maxWidth: '100vw'
+      maxWidth: (props) => (props.inExample ? '100%' : 'calc(100vw - 64px)')
     }
   },
   switchwrapper: {
@@ -69,9 +69,9 @@ const useStylesCode = makeStyles((theme) => ({
   }
 }));
 
-const CodeEditor = ({ value, children, className, switchable, ...props }) => {
+const CodeEditor = ({ value, children, className, switchable, inExample, ...props }) => {
   const [env, setEnv] = useState('cjs');
-  const classes = useStylesCode();
+  const classes = useStylesCode({ inExample });
 
   const lang = className ? className.toLowerCase().replace('language-', '') : undefined;
   let content = value || children || '';
@@ -136,7 +136,8 @@ CodeEditor.propTypes = {
   value: PropTypes.string,
   children: PropTypes.string,
   className: PropTypes.string,
-  switchable: PropTypes.bool
+  switchable: PropTypes.bool,
+  inExample: PropTypes.bool
 };
 
 export default CodeEditor;

packages/react-renderer-demo/src/components/code-example.js

@@ -22,6 +22,11 @@ import CodesandboxIcon from './common/code-sandbox-svg-icon';
 import CodeEditor from './code-editor';
 
 const useStyles = makeStyles((theme) => ({
+  container: {
+    [theme.breakpoints.down('sm')]: {
+      maxWidth: 'calc(100vw - 64px)'
+    }
+  },
   codeWrapper: {
     background: '#1D1F21',
     paddingTop: 16,
@@ -152,7 +157,7 @@ const CodeExample = ({ source, mode, mapper }) => {
   const classes = useStyles();
   if (mode === 'preview') {
     return (
-      <Grid container spacing={0} className="DocRawComponent">
+      <Grid container spacing={0} className={clsx('DocRawComponent', classes.container)}>
         <Grid item xs={12}>
           <ExpansionPanel className={classes.expansionPanel}>
             <ExpansionPanelSummary
@@ -194,7 +199,7 @@ const CodeExample = ({ source, mode, mapper }) => {
               </Box>
             </ExpansionPanelSummary>
             <ExpansionPanelDetails className={clsx(classes.expansionPanelDetail, classes.codeWrapper)}>
-              <CodeEditor value={codeSource} />
+              <CodeEditor value={codeSource} inExample />
             </ExpansionPanelDetails>
           </ExpansionPanel>
         </Grid>