Linting

src/components/Player/Status.jsx

@@ -1,12 +1,7 @@
 import { h } from 'preact'
 
-const INITIAL_STATUS = {
-  stage: 'loading',
-  details: 'Loading...'
-}
-
 const fail = details => (
-  <div class="status fail">
+  <div class='status fail'>
     <h1>Error</h1>
     {details.map(x => (<p>{x}</p>))}
     <hr />
@@ -21,7 +16,7 @@ const fail = details => (
 )
 
 const loading = details => (
-  <div class="status loading">
+  <div class='status loading'>
     {details.map(x => (<div>{x}</div>))}
   </div>
 )

src/style/base.css

@@ -35,9 +35,7 @@ html, body {
 }
 @media (min-width: 800px) {
   .app > main {
-    height: 90%;
-    max-height: 90%;
-
+    margin: 5vh 0;
     max-width: 800px;
   }
 }

src/style/views/PlayerView.css

@@ -1,3 +1,10 @@
 .app.play {
   height: 100%;
 }
+
+@media (min-width: 800px) {
+  .app.play main {
+    max-height: 90%;
+    margin: auto;
+  }
+}