From b75cf8d521e74ff03fa9d30317060bd9a321d929 Mon Sep 17 00:00:00 2001
From: Stefan Kraus <stefan.kraus@methodpark.de>
Date: Mon, 5 Apr 2021 13:49:48 +0200
Subject: [PATCH] Make layout work on smaller displays
---
frontend/src/App.tsx | 2 +-
frontend/src/connectionstatus/ConnectionStatusBar.tsx | 2 +-
frontend/src/index.tsx | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 547a910..96fb4b1 100644
--- a/frontend/src/App.tsx
+++ b/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 />
diff --git a/frontend/src/connectionstatus/ConnectionStatusBar.tsx b/frontend/src/connectionstatus/ConnectionStatusBar.tsx
index a5c2d9a..c74fc71 100644
--- a/frontend/src/connectionstatus/ConnectionStatusBar.tsx
+++ b/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>
);
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index d5484e0..6c7ce22 100644
--- a/frontend/src/index.tsx
+++ b/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",
},
--
GitLab