InputControls: menu button scaffold

src/components/Player/InputBox.jsx

@@ -129,14 +129,23 @@ export default function InputBox ({
   }
 
   return (
-    <input {...inputHandlers[inputType]}
-      className='inputBox'
-      ref={inputEl}
-      value={inputText}
-      autofocus
-      autocomplete='off'
-      onDblClick={onFullscreenRequest}
-      onInput={({ target: { value } }) => setInputText(value)}
-      type='text' />
+    <section className='inputControls'>
+      <input {...inputHandlers[inputType]}
+        className='inputBox'
+        ref={inputEl}
+        value={inputText}
+        autofocus
+        autocomplete='off'
+        onDblClick={onFullscreenRequest}
+        onInput={({ target: { value } }) => setInputText(value)}
+        type='text' />
+      <button
+        aria-label='Menu'
+        className='menuButton'
+        onClick={() => setMenuOpen(true)}
+      >
+        =
+      </button>
+    </section>
   )
 }

src/components/Player/player.css

@@ -9,9 +9,18 @@
   padding: var(--outer-padding);
 }
 
-.ifplayer .inputBox {
-  flex: 0 1 auto;
+.ifplayer .inputControls {
+  position: relative;
+  margin-top: var(--input-box-margin);
+}
 
+.ifplayer .inputControls .menuButton {
+  position: absolute;
+  right: 0;
+  height: 100%;
+}
+
+.ifplayer .inputBox {
   font: inherit;
   color: inherit;
   outline: 0;
@@ -21,7 +30,7 @@
   border-top: var(--separator-width) solid var(--main-color);
   padding: var(--inner-padding);
   margin: 0;
-  margin-top: var(--input-box-margin);
+  width: 100%;
 }
 
 .ifplayer .inputBox::placeholder {