Address css/styling related review comments

At a screen width of 742px only the icons are now displayed in the header menu and the text is hidden.
The 742px are based on the French language (the header is the widest in French) and at a screen width of 742px the last header entry ("Info") disappears.

A group of shortcuts no longer has a fixed width.
EXCEPT from a screen width of 350px. At about this width, it starts to look too tight and squashed. Therefore the groups are then 300px wide.
So it still looks nice with a width of 320px (300px for shortcuts and 10px margin per side).

src/ui/header.js

@@ -3,7 +3,7 @@
 import { jsx, useColorMode } from 'theme-ui';
 
 import { Link, NavLink, useLocation } from 'react-router-dom';
-import React, { Fragment, useState } from 'react';
+import { Fragment, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -97,16 +97,6 @@ const NavElement = ({ target, children, icon, ...rest }) => {
   const { isRecording } = useStudioState();
   const [ colorMode ] = useColorMode();
 
-  const [matches, setMatches] = useState(
-    window.matchMedia("(min-width: 700px)").matches
-  )
-
-  React.useEffect(() => {
-    window
-    .matchMedia("(min-width: 700px)")
-    .addEventListener('change', e => setMatches( e.matches ));
-  }, []);
-
   return (
     <NavLink
       to={{
@@ -120,8 +110,8 @@ const NavElement = ({ target, children, icon, ...rest }) => {
       }}
       sx={{
         color: 'white',
-        pl: [3, '10px'],
-        pr: [3, '14px'],
+        pl: [3, '12px'],
+        pr: [3, '12px'],
         textDecoration: 'none',
         fontSize: '18px',
         height: ['auto', '100%'],
@@ -139,29 +129,25 @@ const NavElement = ({ target, children, icon, ...rest }) => {
       }}
       {...rest}
     >
-      {matches && ( <>
         <div sx={{
           width: '20px',
           display: 'inline-block',
           textAlign: 'right',
           mr: [3, 3, 2],
+          '@media screen and (max-width: 742px)': {
+            mr: [0, 0, 0],
+          }
         }}>
           <FontAwesomeIcon icon={icon} />
         </div>
-        {children}
-      </> )}
-
-      {!matches && ( <>
         <div sx={{
-          width: '20px',
-          display: 'contents',
-          textAlign: 'right',
-          mr: [3, 3, 2],
+          display: 'inline-block',
+          '@media screen and (max-width: 742px)': {
+            display: 'none'
+          }
         }}>
-          <FontAwesomeIcon icon={icon} />
+          {children}
         </div>
-      </> )}
-
     </NavLink>
   );
 }

src/ui/studio/keyboard-shortcuts/shortcuts.js

@@ -12,7 +12,9 @@ const Group = ({name, entries}) => {
       margin: '10px',
       display: 'flex',
       flexDirection: 'column',
-      width: '420px',
+      '@media screen and (max-width: 350px)': {
+        width: '300px',
+      }
     }}>
       <h3 sx={{
         borderBottom: theme => `1px solid ${theme.colors.gray[1]}`,
@@ -35,26 +37,20 @@ const Entry = ({params}) => {
       display: 'flex',
       flexDirection: 'row',
       padding: '6px 0',
+      alignItems: 'center'
     }}>
 
       <div sx={{
         width: '40%',
-        minWidth: '40%',
         wordWrap: 'break-word',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignContent: 'center',
       }}>
         {t(params.name)}
       </div>
         {params.description.map((description, index, arr) => (
           <div key={index}
             sx={{
-              padding: '2px 0',
-              alignSelf: 'center', 
-              display: 'flex', 
-              flexDirection: 'row',
+              padding: '2px 0', 
+              display: 'flex',
           }}>
             {description.toString().split('+').map((singleKey, index) => (
               <div key={index}