From a63552f32bc8e7d51de8dfed78ddd7e66df07150 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Sat, 26 Nov 2022 18:00:09 -0800
Subject: [PATCH] fix ReviewCard css, fixes article tag overflow issue, should
 resolve #85

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 source/assets/scripts/ReviewCard.js | 35 +++++++++++++++--------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index ba3388c..9cf9813 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -31,18 +31,15 @@ class ReviewCard extends HTMLElement {
 			align-items: center;
 			border: 2px solid rgb(31, 41, 32);
 			border-radius: 8px;
-			display: grid;
-			grid-template-rows: 118px 56px 14px 18px 15px 36px;
 			height: auto;
 			row-gap: 5px;
 			padding: 0 16px 16px 16px;
-			width: 178px;
+			width: 200px;
 			margin: 8px 8px 8px 8px;
 		}
 		
 		div.rating {
 			align-items: center;
-			column-gap: 5px;
 			display: flex;
 		}
 		
@@ -50,30 +47,30 @@ class ReviewCard extends HTMLElement {
 			height: auto;
 			display: inline-block;
 			object-fit: scale-down;
-			width: 78px;
 		}
 		
 		article>img {
 			border-top-left-radius: 6px;
 			border-top-right-radius: 6px;
-			height: 119px;
+			height: 120px;
 			object-fit: cover;
 			margin-left: -16px;
+			margin-right: -16px;
 			width: calc(100% + 32px);
 		}
+
+		.meal-name-div {
+			height: 54px;
+			overflow: hidden;
+		}
 		
 		label.restaurant-name {
 			color: black !important;
 		}
 		
 		label.meal-name {
-			display: -webkit-box;
-			font-size: 16px;
+			font-size: 24px;
 			height: 36px;
-			line-height: 18px;
-			overflow: hidden;
-			-webkit-line-clamp: 2;
-			-webkit-box-orient: vertical;
 		}
 		
 		label:not(.meal-name),
@@ -87,15 +84,16 @@ class ReviewCard extends HTMLElement {
 			margin-top: 20px;
 			display: flex;
 			flex-flow: row wrap;
+			height: 100px;
+			overflow: hidden;
 		}
 		
 		.a-tag {
 			background-color:#94da97;
-			border-radius: 7px;
+			border-radius: 6px;
 			color: #94da97;
-			padding-right: 7px;
-			padding-left: 7px;
-			margin: 3px;
+			padding: 0px 6px 2px 6px;
+			margin: 2px 2px 2px 2px;
 			font-weight: bold;
 		}
     	`;
@@ -162,10 +160,13 @@ class ReviewCard extends HTMLElement {
 		});
 
 		//meal name setup
+		let meallabelDiv = document.createElement("div");
+		meallabelDiv.setAttribute("class", "meal-name-div");
 		let mealLabel = document.createElement("label");
 		mealLabel.setAttribute("id", "a-mealName");
 		mealLabel.setAttribute("class","meal-name");
 		mealLabel.innerHTML = data["mealName"];
+		meallabelDiv.append(mealLabel);
 
 		//restaurant name setup
 		let restaurantLabel = document.createElement("label");
@@ -206,7 +207,7 @@ class ReviewCard extends HTMLElement {
 		//adding final ID to data!
 
 		articleEl.append(mealImg);
-		articleEl.append(mealLabel);
+		articleEl.append(meallabelDiv);
 		articleEl.append(restaurantLabel);
 		articleEl.append(ratingDiv);
 		articleEl.append(tagContainer);