MenuButton: markup for small screens

src/components/Player/InputBox/MenuButton/MenuButton.jsx

@@ -1,8 +1,8 @@
 import { h } from 'preact'
 
-import s from './MenuButton.module.scss'
+import * as s from './MenuButton.module.scss'
 
-export default MenuButton = ({ onClick }) => {
+export default function MenuButton ({ onClick }) {
   return (
     <button
       aria-label='Menu'
@@ -14,9 +14,9 @@ export default MenuButton = ({ onClick }) => {
         viewBox='0 0 28 32'
         xmlns='http://www.w3.org/2000/svg'
       >
-        <rect x='12' y='4' width='4' height='4'></rect>
+        <rect x='12' y='4' width='4' height='4' />
-        <rect x='12' y='14' width='4' height='4'></rect>
+        <rect x='12' y='14' width='4' height='4' />
-        <rect x='12' y='24' width='4' height='4'></rect>
+        <rect x='12' y='24' width='4' height='4' />
       </svg>
     </button>
   )

src/components/Player/InputBox/MenuButton/MenuButton.module.scss

@@ -10,6 +10,11 @@
   height: 100%;
   padding: 0;
 
+  @media (max-width: 800px) {
+    padding: 0 calc(0.5 * var(--inner-padding));
+    overflow: hidden;
+  }
+
   &:focus-visible {
     outline-offset: -4px;
   }
@@ -19,5 +24,10 @@
     fill: none;
     stroke: currentColor;
     stroke-width: 2px;
+
+    @media (max-width: 800px) {
+      transform: scaleX(2) scaleY(0.5);
+      fill: currentColor;
+    }
   }
 }

src/components/Player/OutputBox/GridBuffer.jsx

@@ -57,7 +57,7 @@ export default function GridBuffer ({ inbox, currentWindow }) {
 
     const getGridStyle = ({style}) => {
       if (['alert', 'normal'].includes(style)) return 'grid'
-      else return style || 'grid'
+      return style || 'grid'
     }
 
     const messages =

src/components/Player/Player.jsx

@@ -11,7 +11,7 @@ import Status from './Status/Status'
 
 import {
   Handlers,
-  unhandledRejectionHandler
+  unhandledRejectionHandler,
 } from './common/playerHandlers'
 
 import './player.css'

src/components/Player/player.css

@@ -29,7 +29,7 @@
   border: var(--border-width) solid var(--main-color);
   border-top: var(--separator-width) solid var(--main-color);
   padding: var(--inner-padding);
-  padding-right: calc(3 * var(--inner-padding));
+  padding-right: calc(4 * var(--inner-padding));
   margin: 0;
   width: 100%;
 }

src/views/PlayerView/PlayerView.jsx

@@ -34,7 +34,7 @@ export default function PlayerView ({
         onFullscreenRequest,
         menuOpen,
         setMenuOpen,
-      }}/>
+      }} />
       <UrlPlayer {...{
         url: targetUrl,
         onFullscreenRequest,