From 9f9ac19b71cefe119cb5da84a1acd1a6c6823c75 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Mon, 21 Nov 2022 17:20:12 -0800
Subject: [PATCH] fix ReviewDetails CreatePage large tag display issue

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 source/assets/scripts/ReviewCard.js | 171 ++++++++++++++--------------
 source/static/Form.css              |   5 +
 source/static/ReviewDetails.css     |   5 -
 3 files changed, 91 insertions(+), 90 deletions(-)

diff --git a/source/assets/scripts/ReviewCard.js b/source/assets/scripts/ReviewCard.js
index 2fa12c2..cb60ccf 100644
--- a/source/assets/scripts/ReviewCard.js
+++ b/source/assets/scripts/ReviewCard.js
@@ -12,92 +12,93 @@ class ReviewCard extends HTMLElement {
 
 		let styleEl = document.createElement("style");
 		styleEl.textContent = `
-      * {
-        font-family: Century Gothic;
-        margin: 0;
-        padding: 0;
-      }
-    
-      a {
-        text-decoration: none;
-      }
-    
-      a:hover {
-        text-decoration: underline;
-      }
-    
-      article {
-        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;
-		margin: 8px 8px 8px 8px;
-      }
-    
-      div.rating {
-        align-items: center;
-        column-gap: 5px;
-        display: flex;
-      }
-    
-      div.rating>img {
-        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;
-        object-fit: cover;
-        margin-left: -16px;
-        width: calc(100% + 32px);
-      }
-    
-      label.restaurant-name {
-        color: black !important;
-      }
-    
-      label.meal-name {
-        display: -webkit-box;
-        font-size: 16px;
-        height: 36px;
-        line-height: 18px;
-        overflow: hidden;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-    
-      label:not(.meal-name),
-      span,
-      time {
-        color: #70757A;
-        font-size: 12px;
-	  }
+		* {
+			font-family: Century Gothic;
+			margin: 0;
+			padding: 0;
+			overflow-wrap: anywhere;
+		}
+		
+		a {
+			text-decoration: none;
+		}
+		
+		a:hover {
+			text-decoration: underline;
+		}
+		
+		article {
+			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;
+			margin: 8px 8px 8px 8px;
+		}
+		
+		div.rating {
+			align-items: center;
+			column-gap: 5px;
+			display: flex;
+		}
+		
+		div.rating>img {
+			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;
+			object-fit: cover;
+			margin-left: -16px;
+			width: calc(100% + 32px);
+		}
+		
+		label.restaurant-name {
+			color: black !important;
+		}
+		
+		label.meal-name {
+			display: -webkit-box;
+			font-size: 16px;
+			height: 36px;
+			line-height: 18px;
+			overflow: hidden;
+			-webkit-line-clamp: 2;
+			-webkit-box-orient: vertical;
+		}
+		
+		label:not(.meal-name),
+		span,
+		time {
+			color: #70757A;
+			font-size: 12px;
+		}
 
-	  .tag-container {
-		margin-top: 20px;
-		display: flex;
-		flex-flow: row wrap;
-	  }
-	  
-	  .a-tag {
-		background-color:#94da97;
-		border-radius: 7px;
-		color: #94da97;
-		padding-right: 7px;
-		padding-left: 7px;
-		margin: 3px;
-		font-weight: bold;
-	  }
-    `;
+		.tag-container {
+			margin-top: 20px;
+			display: flex;
+			flex-flow: row wrap;
+		}
+		
+		.a-tag {
+			background-color:#94da97;
+			border-radius: 7px;
+			color: #94da97;
+			padding-right: 7px;
+			padding-left: 7px;
+			margin: 3px;
+			font-weight: bold;
+		}
+    	`;
 		articleEl.append(styleEl);
 		shadowEl.append(articleEl);
 		this.shadowEl = shadowEl;
diff --git a/source/static/Form.css b/source/static/Form.css
index 4dc0fe1..07fa748 100644
--- a/source/static/Form.css
+++ b/source/static/Form.css
@@ -139,4 +139,9 @@ input[type=text]:focus {
 
 .hidden {
 	display: none;
+}
+
+.tag-container * {
+	max-width: 100%;
+	overflow-wrap: anywhere;
 }
\ No newline at end of file
diff --git a/source/static/ReviewDetails.css b/source/static/ReviewDetails.css
index d8935b6..e9d3f7f 100644
--- a/source/static/ReviewDetails.css
+++ b/source/static/ReviewDetails.css
@@ -41,9 +41,4 @@ h1 {
 	padding-right: 7px;
 	padding-left: 7px;
 	margin: 10px 10px 10px 10px; 
-}
-
-.tag-container > .d-tag {
-	max-width: 100%;
-	overflow-wrap: anywhere;
 }
\ No newline at end of file