From 8c60ef10fed72ed126d4ed9e993912b93b6cd6b5 Mon Sep 17 00:00:00 2001
From: Vincent Bitter <v.bitter@maxiblue.nl>
Date: Mon, 9 Dec 2019 17:28:23 +0100
Subject: [PATCH] Show more devices in a row on large screens

---
 website/src/components/AddDevice.tsx | 2 +-
 website/src/components/Devices.tsx   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/website/src/components/AddDevice.tsx b/website/src/components/AddDevice.tsx
index aa54706a..0ab1264b 100644
--- a/website/src/components/AddDevice.tsx
+++ b/website/src/components/AddDevice.tsx
@@ -81,7 +81,7 @@ class AddDevice extends React.Component {
               error={this.state.error !== ''}
               value={this.state.name}
               onChange={(event) => this.setState({ name: event.currentTarget.value })}
-              style={{ marginTop: -20, marginBottom: 8 }}
+              style={{ marginTop: -30, marginBottom: 8 }}
               fullWidth
             />
             {this.state.error !== '' && <FormHelperText>{this.state.error}</FormHelperText>}
diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
index ea9c26ce..641ce59c 100644
--- a/website/src/components/Devices.tsx
+++ b/website/src/components/Devices.tsx
@@ -19,12 +19,12 @@ class Devices extends React.Component {
 
   render() {
     return (
-      <Grid container spacing={3} style={{ padding: '1rem' }}>
-        <Grid item xs={12} sm={6}>
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6} md={4} lg={3}>
           <AddDevice />
         </Grid>
         {AppState.devices.map((device, i) =>
-          <Grid key={i} item xs={12} sm={6}>
+          <Grid key={i} item xs={12} sm={6} md={4} lg={3}>
             <Device device={device} />
           </Grid>
         )}