Make layout work on smaller displays

frontend/src/App.tsx

@@ -10,7 +10,7 @@ import PlayerButtonBar from "./player/PlayerButtonBar";
 function App() {
   return (
     <Container maxWidth={window.innerWidth >= 2000 ? "xl" : "lg"}>
-      <Box my={1}>
+      <Box my={0}>
         <Grid container spacing={1}>
           <Grid item xs={12}>
             <ConnectionStatusBar />

frontend/src/connectionstatus/ConnectionStatusBar.tsx

@@ -61,7 +61,7 @@ export function ConnectionStatusBar(props: Props) {
   return (
     <div className={classes.root}>
       <AppBar position="static" color="default">
-        <Toolbar>{TypographyHelper()}</Toolbar>
+        <Toolbar variant="dense">{TypographyHelper()}</Toolbar>
       </AppBar>
     </div>
   );

frontend/src/index.tsx

@@ -8,7 +8,7 @@ import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
 import CssBaseline from "@material-ui/core/CssBaseline";
 
 const theme = createMuiTheme({
-  spacing: 4,
+  spacing: 8,
   palette: {
     type: "dark",
   },