Use fullscreen api wrapper

package.json

@@ -28,6 +28,7 @@
     "react-dropzone": "10.0.4",
     "react-router-dom": "5.0.0",
     "react-scripts": "2.1.8",
+    "screenfull": "5.0.2",
     "string-to-arraybuffer": "1.0.2",
     "styled-components": "4.1.3",
     "typescript": "3.9.5",

src/components/functional/Terminal.tsx

@@ -8,6 +8,7 @@ import ArrowCollapse from 'mdi-material-ui/ArrowCollapse'
 import FullscreenExit from 'mdi-material-ui/FullscreenExit'
 import HelpTooltip from 'src/components/functional/HelpTooltip'
 import str2ab from 'string-to-arraybuffer'
+import screenfull from 'screenfull'
 import { Terminal } from 'xterm'
 import * as fit from 'xterm/lib/addons/fit/fit'
 import * as termFullscreen from 'xterm/lib/addons/fullscreen/fullscreen'
@@ -471,7 +472,11 @@ class TerminalComponent extends Component<Props, State> {
       const lastHeight = container.clientHeight
 
       let terminal = this.terminalRef.current
-      await terminal.requestFullscreen()
+      if (!screenfull.isEnabled) {
+        throw new Error('Not supported')
+      }
+
+      screenfull.request(terminal)
       this.focusTerminal()
 
       this.setState({
@@ -497,9 +502,11 @@ class TerminalComponent extends Component<Props, State> {
   }
 
   exitFullscreen () {
-    if (document.exitFullscreen) {
-      document.exitFullscreen()
+    if (!screenfull.isEnabled) {
+      throw new Error('Not supported')
     }
+
+    screenfull.exit()
   }
 
   showExpandedView () {

src/components/header/Header.tsx

@@ -98,6 +98,7 @@ const UI = {
       display: inline-block;
       width: auto;
       float: left;
+      min-width: 220px;
     }
   `,
   ShareUrlInput: styled.input`
@@ -192,7 +193,7 @@ const UI = {
   `,
   Settings: styled.div`
     @media (max-width: 500px) {
-      float: left;
+      float: right;
     }
   `,
   Notice: styled.div`