Add styles for InputBox

src/components/player/InputBox.jsx

@@ -81,7 +81,8 @@ export default function ({ currentWindow, inputType, sendMessage }) {
       value={inputText}
       placeholder={placeholder[inputType]}
       autofocus
+      autocomplete="off"
       onInput={({ target: { value } }) => setInputText(value)}
-      type='text' />
+      type='search' />
   )
 }

src/components/player/Player.jsx

@@ -55,13 +55,13 @@ const Handlers = ({
   onFileRead: ({ filename }) => {
     if (filename === 'save') return null
 
-    const lsName = prompt('Enter RecordID:')
+    const lsName = prompt('Enter the name of the saved file:')
 
     const record = localStorage.getItem(`save-${lsName}`)
     return decode(record)
   },
   onFileWrite: ({ filename }, content) => {
-    const lsName = prompt('Choose RecordID:')
+    const lsName = prompt('Select a name for the saved file:')
     const record = encode(content)
 
     localStorage.setItem(`save-${lsName}`, record)

src/components/player/player.css

@@ -10,6 +10,8 @@
 .inputBox {
   flex: 0 1 auto;
 
+  font: inherit;
+  outline: 0;
   border: 2px solid #000;
   padding: 8px;
 }

src/style/base.css

@@ -1,11 +1,14 @@
 html, body {
   margin: 0;
+  height: 100%;
 }
 
 body {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+
+  font-size: 18px;
+  line-height: 27px;
 }
 
 #root {