From efebaf93ce6f87525fcf4b52bbae2f5c4445a9a1 Mon Sep 17 00:00:00 2001
From: Matthew Grove <me@mgrove.uk>
Date: Sun, 12 Sep 2021 15:20:48 +0100
Subject: [PATCH] [FIX] Progress history layout Align table cells correctly

---
 src/History.js      | 28 ++++++++++++++++------------
 src/LoggedInHome.js | 12 +++++++-----
 src/css/App.css     |  8 ++++++++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/History.js b/src/History.js
index 2b5c70e..f6abd7d 100644
--- a/src/History.js
+++ b/src/History.js
@@ -225,11 +225,13 @@ export default class History extends Component {
 																<PeopleRoundedIcon />
 															}
 														</p>
-														<Button
-															className="button--no-background"
-															onClick={() => this.deleteProgress(progressItem.id)}
-															icon={<DeleteRoundedIcon />}
-														></Button>
+														<p>
+															<Button
+																className="button--no-background"
+																onClick={() => this.deleteProgress(progressItem.id)}
+																icon={<DeleteRoundedIcon />}
+															></Button>
+														</p>
 													</div>
 												)
 											}
@@ -261,13 +263,15 @@ export default class History extends Component {
 														<p>{progressItem.percentageProgress}%</p>
 														<p>{progressItem.correct}/{progressItem.progress}</p>
 														<p>{progressItem.grade}%</p>
-														{
-															progressItem.mode === "questions"
-															?
-															<QuestionAnswerRoundedIcon />
-															:
-															<PeopleRoundedIcon />
-														}
+														<p>
+															{
+																progressItem.mode === "questions"
+																?
+																<QuestionAnswerRoundedIcon />
+																:
+																<PeopleRoundedIcon />
+															}
+														</p>
 													</div>
 												)	
 											}
diff --git a/src/LoggedInHome.js b/src/LoggedInHome.js
index 09d5d24..942fe7c 100644
--- a/src/LoggedInHome.js
+++ b/src/LoggedInHome.js
@@ -300,11 +300,13 @@ export default withRouter(class LoggedInHome extends React.Component {
 														<PeopleRoundedIcon />
 												}
 											</p>
-											<Button
-												className="button--no-background"
-												onClick={() => this.deleteProgress(progressItem.id)}
-												icon={<DeleteRoundedIcon />}
-											></Button>
+											<p>
+												<Button
+													className="button--no-background"
+													onClick={() => this.deleteProgress(progressItem.id)}
+													icon={<DeleteRoundedIcon />}
+												></Button>
+											</p>
 										</div>
 									)
 								}
diff --git a/src/css/App.css b/src/css/App.css
index 55a4af2..3758f72 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -347,11 +347,19 @@ label, p, input[type=text], main > span, main div > span {
 	text-decoration: none;
 	color: inherit;
   border-left: 8px solid transparent;
+  text-align: center;
+  vertical-align: top;
 }
 
 .progress-history-container > div > *:first-child {
   border-left: 0;
   word-break: break-all;
+  text-align: left;
+}
+
+.progress-history-container .button.button--no-background {
+  padding: 0;
+  margin: 0;
 }
 
 @media screen and (max-width: 420px) {