Merge pull request #58 from fpoumian/fix-code-editor-layout-css

Fix Code Editor layout in Smaller Screen Sizes

src/components/CodeEditor/CodeEditor.js

@@ -105,7 +105,7 @@ class CodeEditor extends Component {
                 overflow: 'hidden',
                 borderRadius: '10px 0 0 10px',
 
-                [media.lessThan('small')]: {
+                [media.lessThan('medium')]: {
                   borderRadius: '10px 10px 0 0',
                 },
               }}>
@@ -127,11 +127,14 @@ class CodeEditor extends Component {
                   paddingLeft: '0 !important',
                   marginRight: '0 !important',
                   paddingRight: '0 !important',
+                  [media.lessThan('medium')]: {
+                    marginBottom: '0 !important',
+                  },
 
                   '& pre.prism-code[contenteditable]': {
                     maxHeight: '280px !important',
                     outline: 0,
-                    overflow : 'auto',
+                    overflow: 'auto',
                     marginRight: '0 !important',
                     marginBottom: '0 !important',
                   },
@@ -150,7 +153,7 @@ class CodeEditor extends Component {
                   fontSize: 12,
                   lineHeight: 1.5,
 
-                  [media.lessThan('small')]: {
+                  [media.lessThan('medium')]: {
                     borderRadius: '0 0 10px 10px',
                   },
                 }}>
@@ -186,7 +189,7 @@ class CodeEditor extends Component {
                   border: `1px solid ${colors.divider}`,
                   borderRadius: '0 10px 10px 0',
 
-                  [media.lessThan('small')]: {
+                  [media.lessThan('medium')]: {
                     borderRadius: '0 0 10px 10px',
                   },
                 }}>