Add basic styles

src/components/player/Player.jsx

@@ -10,6 +10,8 @@ import CheapGlkOte from 'cheap-glkote'
 import TextBuffer from './TextBuffer'
 import InputBox from './InputBox'
 
+import './player.css'
+
 const INITIAL_STATUS = {
   stage: 'loading',
   details: 'Preparing...'
@@ -104,7 +106,7 @@ export default function ({ vmParts: { file, engine } }) {
   return status.stage !== 'ready'
     ? (<div>{status.details}</div>)
     : (
-      <section>
+      <section className='ifplayer'>
         <TextBuffer {...{
           inbox,
           currentWindow

src/components/player/player.css

@@ -0,0 +1,26 @@
+.ifplayer {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  padding: 8px;
+}
+
+.inputBox {
+  flex: 0 1 auto;
+
+  border: 2px solid #000;
+  padding: 8px;
+}
+
+.textBuffer {
+  flex: 2 1 auto;
+  overflow-y: scroll;
+  box-sizing: border-box;
+
+  border: 2px solid #000;
+  padding: 8px;
+  margin-bottom: 8px;
+}
+

src/style/base.css

@@ -1,3 +1,17 @@
 html, body {
   margin: 0;
 }
+
+body {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#root {
+  height: 100%;
+}
+
+.app {
+  height: 100%;
+}

src/views/PlayerView.jsx

@@ -14,8 +14,5 @@ export default function ({ setTheme, theme, encodedUrl }) {
     setTargetUrl(decode(encodedUrl))
   }, [encodedUrl])
 
-  return (
-    <main>
-      <UrlPlayer url={targetUrl} />
-    </main>)
+  return (<UrlPlayer url={targetUrl} />)
 }