Fixed persistent scrollbar in props tab, and positioning of some bottom panel components

Author: jzuniga206

src/components/bottom/CodePreview.tsx

@@ -19,7 +19,6 @@ type CodePreviewProps = {
 };
 
 class CodePreview extends Component<CodePreviewProps> {
-
   //checking if the code has been asigned yet or not
   //if no then generate code and asign to a focus component
   componentDidMount() {
@@ -67,10 +66,10 @@ class CodePreview extends Component<CodePreviewProps> {
         }}
       >
         <AceEditor
-          mode="javascript"
-          theme="monokai"
-          width="100%"
-          height="100%"
+          mode='javascript'
+          theme='monokai'
+          width='100%'
+          height='100%'
           style={{
             border: '2px solid #33eb91',
             borderRadius: '8px'
@@ -82,19 +81,19 @@ class CodePreview extends Component<CodePreviewProps> {
             })
           }
           value={this.props.focusComponent.code}
-          name="Code_div"
+          name='Code_div'
           readOnly={this.props.codeReadOnly}
           editorProps={{ $blockScrolling: true }}
           fontSize={16}
         />
         <div style={{ display: 'flex', flexDirection: 'column' }}>
           <Button
-            color="primary"
-            aria-label="Add"
-            type="submit"
+            color='primary'
+            aria-label='Add'
+            type='submit'
             // disabled={!this.state.propKey || !this.state.propType}
-            variant="contained"
-            size="large"
+            variant='contained'
+            size='large'
             style={{ justifySelf: 'center' }}
             className={this.props.classes.startEdit}
             onClick={e => {

src/components/bottom/Props.tsx

@@ -266,7 +266,10 @@ class Props extends Component<PropsPropsInt, StateInt> {
     }));
 
     return (
-      <div className={'htmlattr'}>
+      <div
+        className={'htmlattr'}
+        style={{ overflowY: 'auto', height: '85%', marginTop: '1rem' }}
+      >
         {' '}
         {/* if no focus component in state, then render message */}
         {Object.keys(focusComponent).length < 1 ? (
@@ -299,7 +302,7 @@ class Props extends Component<PropsPropsInt, StateInt> {
               className='props-container'
               style={{ marginTop: '20px', width: '90%', height: '80%' }}
             >
-              <Grid container spacing={8}>
+              <Grid container spacing={8} style={{ overflowY: 'auto' }}>
                 <Grid item xs={3}>
                   <form
                     className='props-input'
@@ -409,10 +412,12 @@ class Props extends Component<PropsPropsInt, StateInt> {
                   item
                   xs={8}
                   style={{
-                    height: '17rem',
-                    overflow: 'scroll',
+                    height: '75%',
+                    overflowY: 'auto',
+                    overflowX: 'auto',
                     marginTop: '1rem',
-                    paddingBottom: '1rem',
+                    // paddingBottom: '1rem',
+                    marginLeft: '6rem',
                     paddingTop: '0'
                   }}
                 >