Small tweak for Firefox and added a start button to the start banner

src/components/ControlPanel.js

@@ -67,7 +67,7 @@ export const ControlPanel = ({
   zoomOut
 }) => (
   <Layout>
-    <HorizontalStack style={{ minHeight: "2rem" }}>
+    <HorizontalStack style={{ minHeight: "2rem", lineHeight: "2rem" }}>
       <ThemeSelector onChange={e => changeTheme(e.target.value)} value={theme}>
         <option value="light">Light</option>
         <option value="dark">Miami Night</option>
@@ -75,7 +75,7 @@ export const ControlPanel = ({
         <option value="default">Black / White</option>
       </ThemeSelector>
     </HorizontalStack>
-    <HorizontalStack style={{ minHeight: "2rem" }}>
+    <HorizontalStack style={{ minHeight: "2rem", lineHeight: "2rem" }}>
       <span>
         Zoom: <b>{zoom}</b>
       </span>
@@ -84,7 +84,7 @@ export const ControlPanel = ({
         <IconButton icon="plus-circle" size={1} onClick={zoomIn} />
       </div>
     </HorizontalStack>
-    <HorizontalStack style={{ minHeight: "2rem" }}>
+    <HorizontalStack style={{ minHeight: "2rem", lineHeight: "2rem", marginBottom: "1rem" }}>
       <span>
         FPS: <b>{fps}</b>
       </span>

src/components/Tooltip.js

@@ -11,6 +11,7 @@ export const Tooltip = styled.div`
   margin-top: 0.5rem;
   padding: ${({ theme }) => theme.tooltip.padding};
   box-shadow: 1px 1px 3px ${({ theme }) => theme.tooltip.shadowColor};
+  right: 0;
   ${props =>
     props.hover
       ? css`

src/containers/Snake.js

@@ -22,6 +22,7 @@ import ControlPanel from "../components/ControlPanel.js";
 import Scoreboard from "../components/Scoreboard.js";
 import Stage from "../components/Stage.js";
 import SnakePart from "../components/SnakePart.js";
+import Button, { ButtonContainer } from "../components/Button.js";
 import Apple from "../components/Apple.js";
 import Banner from "../components/Banner.js";
 import Highscore from "../components/Highscore.js";
@@ -87,7 +88,14 @@ const Snake = ({
               (cell.type === "snake" && <SnakePart zoom={zoom} value={cell} died={died} />)
             }
           </Stage>
-          {!started && <Banner fade>Press &apos;r&apos; to start the game</Banner>}
+          {!started && (
+            <Banner fade>
+              <p>Press &apos;r&apos; to start the game</p>
+              <ButtonContainer>
+                <Button onClick={startSnake}>Start</Button>
+              </ButtonContainer>
+            </Banner>
+          )}
           {died && lastGameId !== gameId && hasHighscore(score) && (
             <HighscoreInput score={score} gameId={gameId} name={lastUsername} onSubmit={onSubmitHighscore} />
           )}

src/theming/GlobalStyle.js

@@ -18,6 +18,19 @@ const GlobalStyle = createGlobalStyle`
     font-family: Lato;
   }
 
+  // firefox
+  @-moz-document url-prefix() { 
+    select {
+      text-indent: -2px
+    }
+  }
+
+  // Edge
+  @supports (-ms-ime-align: auto) {
+    select {
+      text-indent: -2px
+    }
+  }
 `;
 
 export default GlobalStyle;