Add option to wrap text (#20)

src/components/EditorControls.tsx

@@ -19,6 +19,8 @@ export interface EditorControlsProps {
   setReadOnly: (value: boolean) => void;
   theme: keyof Themes;
   setTheme: (value: keyof Themes) => void;
+  wordWrap: boolean;
+  setWordWrap: (value: boolean) => void;
   zoom: (delta: number) => void;
 }
 
@@ -31,6 +33,8 @@ export default function EditorControls({
   setReadOnly,
   theme,
   setTheme,
+  wordWrap,
+  setWordWrap,
   zoom,
 }: EditorControlsProps) {
   const [saving, setSaving] = useState<boolean>(false);
@@ -113,6 +117,9 @@ export default function EditorControls({
       <Section>
         <Button onClick={() => zoom(1)}>[+ </Button>
         <Button onClick={() => zoom(-1)}> -]</Button>
+        <Button onClick={() => setWordWrap(!wordWrap)}>
+          [wrap:{wordWrap ? 'on' : 'off'}]
+        </Button>
         <MenuButton
           label="theme"
           value={theme}
@@ -144,13 +151,15 @@ const Header = styled.header`
   display: flex;
   justify-content: space-between;
   user-select: none;
+  overflow-x: auto;
+  white-space: nowrap;
 `;
 
 const Section = styled.div`
   display: flex;
   align-items: center;
 
-  @media (max-width: 470px) {
+  @media (max-width: 850px) {
     .optional {
       display: none;
     }