mobile responsiveness

src/components/EditorControls.js

@@ -76,7 +76,7 @@ export default function EditorControls({ code, setCode, language, setLanguage, t
         <Button onClick={() => zoom(1)}>[+ </Button>
         <Button onClick={() => zoom(-1)}> -]</Button>
         <MenuButton label="theme" value={theme} setValue={setTheme} ids={Object.keys(themes)} />
-        <Button as="a" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about]</Button>
+        <Button className="optional" as="a" href="https://github.com/lucko/paste" target="_blank" rel="noreferrer">[about]</Button>
       </Section>
     </Header>
   )
@@ -97,6 +97,12 @@ const Header = styled.header`
 const Section = styled.div`
   display: flex;
   align-items: center;
+
+  @media (max-width: 470px) {
+    .optional {
+      display: none;
+    }
+  }
 `;
 
 function langaugeToContentType(language) {

src/components/EditorTextArea.js

@@ -19,7 +19,7 @@ export default function EditorTextArea({ code, setCode, language, fontSize }) {
         value={code}
         onValueChange={setCode}
         highlight={highlightWithLineNumbers}
-        placeholder={'Type some code...'}
+        placeholder={'Paste (or type) some code...'}
         padding={10}
         size={fontSize}
         textareaId='code-area'

src/components/Menu.js

@@ -13,6 +13,12 @@ export const Button = styled.div`
   :hover {
     background: ${props => props.theme.highlight};
   }
+
+  @media (max-width: 640px) {
+    span {
+      display: none;
+    }
+  }
 `;
 
 const Menu = styled.ul`
@@ -57,7 +63,7 @@ export const MenuButton = ({ label, ids, value, setValue }) => {
 
   return (
     <Button onClick={toggleOpen}>
-      [{label}: {value}]
+      [<span>{label}: </span>{value}]
       {open && (
         <Menu>  
           {ids.map(id => <li key={id} onClick={e => select(e, id)}>{id}</li>)}