Show more devices in a row on large screens

halkeye · Dec 9, 2019 · 8c60ef1 · 8c60ef1
1 parent 4ad0d69
commit 8c60ef1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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>
         )}