From 25134d4d8635ace72fa89caa93a9807fc00c75e8 Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Tue, 15 Sep 2020 15:29:59 +0200
Subject: [PATCH] hardware images without distortion

---
 src/components/Tutorial/Hardware.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Tutorial/Hardware.js b/src/components/Tutorial/Hardware.js
index 9110283..614d6ae 100644
--- a/src/components/Tutorial/Hardware.js
+++ b/src/components/Tutorial/Hardware.js
@@ -62,7 +62,9 @@ class Hardware extends Component {
             <GridList cellHeight={100} cols={cols} spacing={10}>
             {this.props.picture.map((picture,i) => (
               <GridListTile key={i}>
-                <img src={`/media/hardware/${picture}.png`} height={100} alt={picture} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}/>
+                <div style={{margin: 'auto', width: 'max-content'}}>
+                  <img src={`/media/hardware/${picture}.png`} alt={picture} height={100} style={{cursor: 'pointer'}} onClick={() => this.handleClickOpen(picture, `/media/hardware/${picture}.png`)}/>
+                </div>
                 <GridListTileBar
                   classes={{root: this.props.classes.multiGridListTile}}
                   title={