From 69460a7f55dd48f9ef8cda51ec610deff42dc830 Mon Sep 17 00:00:00 2001
From: He4eT <He4eT@oddsquat.org>
Date: Sun, 4 Jun 2023 01:43:36 +0300
Subject: [PATCH] MenuButton: markup for small screens

---
 .../Player/InputBox/MenuButton/MenuButton.jsx          | 10 +++++-----
 .../Player/InputBox/MenuButton/MenuButton.module.scss  | 10 ++++++++++
 src/components/Player/OutputBox/GridBuffer.jsx         |  2 +-
 src/components/Player/Player.jsx                       |  2 +-
 src/components/Player/player.css                       |  2 +-
 src/views/PlayerView/PlayerView.jsx                    |  2 +-
 6 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/Player/InputBox/MenuButton/MenuButton.jsx b/src/components/Player/InputBox/MenuButton/MenuButton.jsx
index db83962..6f95507 100644
--- a/src/components/Player/InputBox/MenuButton/MenuButton.jsx
+++ b/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='14' width='4' height='4'></rect>
-        <rect x='12' y='24' width='4' height='4'></rect>
+        <rect x='12' y='4' width='4' height='4' />
+        <rect x='12' y='14' width='4' height='4' />
+        <rect x='12' y='24' width='4' height='4' />
       </svg>
     </button>
   )
diff --git a/src/components/Player/InputBox/MenuButton/MenuButton.module.scss b/src/components/Player/InputBox/MenuButton/MenuButton.module.scss
index 20cdfe7..abd0fab 100644
--- a/src/components/Player/InputBox/MenuButton/MenuButton.module.scss
+++ b/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;
+    }
   }
 }
diff --git a/src/components/Player/OutputBox/GridBuffer.jsx b/src/components/Player/OutputBox/GridBuffer.jsx
index 73dab74..121f9e2 100644
--- a/src/components/Player/OutputBox/GridBuffer.jsx
+++ b/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 =
diff --git a/src/components/Player/Player.jsx b/src/components/Player/Player.jsx
index 9b93913..a9c851d 100644
--- a/src/components/Player/Player.jsx
+++ b/src/components/Player/Player.jsx
@@ -11,7 +11,7 @@ import Status from './Status/Status'
 
 import {
   Handlers,
-  unhandledRejectionHandler
+  unhandledRejectionHandler,
 } from './common/playerHandlers'
 
 import './player.css'
diff --git a/src/components/Player/player.css b/src/components/Player/player.css
index 51502a8..7d0f047 100644
--- a/src/components/Player/player.css
+++ b/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%;
 }
diff --git a/src/views/PlayerView/PlayerView.jsx b/src/views/PlayerView/PlayerView.jsx
index 95f5230..7d79884 100644
--- a/src/views/PlayerView/PlayerView.jsx
+++ b/src/views/PlayerView/PlayerView.jsx
@@ -34,7 +34,7 @@ export default function PlayerView ({
         onFullscreenRequest,
         menuOpen,
         setMenuOpen,
-      }}/>
+      }} />
       <UrlPlayer {...{
         url: targetUrl,
         onFullscreenRequest,