From a834c79b4958f93546d4e00c83714be01a7f29a7 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Wed, 18 Aug 2021 18:07:17 +1200
Subject: [PATCH] Fix BrewItem locations and overlapping.

---
 .../pages/userPage/brewItem/brewItem.jsx      | 13 ++++++++-----
 .../pages/userPage/brewItem/brewItem.less     | 19 ++++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/client/homebrew/pages/userPage/brewItem/brewItem.jsx b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
index c096dd438..be0583f88 100644
--- a/client/homebrew/pages/userPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.jsx
@@ -104,13 +104,12 @@ const BrewItem = createClass({
 		const dateFormatString = 'YYYY-MM-DD HH:mm:ss';
 
 		return <div className='brewItem'>
-			<h2>{brew.title}</h2>
-			<p className='description'>{brew.description}</p>
+			<div className='text'>
+				<h2>{brew.title}</h2>
+				<p className='description'>{brew.description}</p>
+			</div>
 			<hr />
 			<div className='info'>
-				<span title={`Authors:\n${brew.authors.join('\n')}`}>
-					<i className='fas fa-user'/> {brew.authors.join(', ')}
-				</span>
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>
 					<i className='fas fa-eye'/> {brew.views}
 				</span>
@@ -123,6 +122,10 @@ const BrewItem = createClass({
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
 				{this.renderGoogleDriveIcon()}
+				<br />
+				<span title={`Authors:\n${brew.authors.join('\n')}`}>
+					<i className='fas fa-user'/> {brew.authors.join(', ')}
+				</span>
 			</div>
 
 			<div className='links'>
diff --git a/client/homebrew/pages/userPage/brewItem/brewItem.less b/client/homebrew/pages/userPage/brewItem/brewItem.less
index 6e47458e3..b5250ae8c 100644
--- a/client/homebrew/pages/userPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/userPage/brewItem/brewItem.less
@@ -10,27 +10,28 @@
 	min-height                  : 105px;
 	margin-right                : 15px;
 	margin-bottom               : 15px;
-	padding                     : 5px 15px 5px 8px;
+	padding                     : 5px 15px 2px 8px;
 	padding-right               : 15px;
 	border                      : 1px solid #c9ad6a;
 	border-radius               : 5px;
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
-	h4{
-		margin-bottom : 5px;
-		font-size     : 2.2em;
-	}
-	.description{
-		padding-bottom : 30px;
+	.text {
+		min-height : 54px;
+		h4{
+			margin-bottom : 5px;
+			font-size     : 2.2em;
+		}
 	}
 	.info{
-		position: absolute;
-		bottom: 0px;
+		position: initial;
+		bottom: 2px;
 		margin-bottom: 4px;
 		font-family : ScalySans;
 		font-size   : 1.2em;
 		&>span{
+			display      : float;
 			margin-right : 12px;
 		}
 	}