Fixed some UX problems with tags

linkdotnet · Jun 19, 2024 · fda7786 · fda7786
1 parent d65fd3b
commit fda7786
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor b/src/LinkDotNet.Blog.Web/Features/ShowBlogPost/ShowBlogPostPage.razor
@@ -43,16 +43,22 @@ else
 			<div class="blog-inner-content">
 				<header class="text-center">
 					<h1 class="fw-bold">@BlogPost.Title</h1></header>
-				<div class="blogpost-metainformation d-flex flex-row flex-wrap gap-2">
-					<div class="me-2"><span class="date"></span><span class="ms-1">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</span></div>
+				<div class="blogpost-metainformation d-flex flex-wrap gap-2">
+					<div class="me-2">
+						<span class="date"></span>
+						<span class="ms-1">@BlogPost.UpdatedDate.ToString("dd/MM/yyyy")</span>
+					</div>
 					@if (BlogPost.Tags is not null && BlogPost.Tags.Any())
 					{
-						<span class="blogpost-tag d-inline-flex align-items-center gap-2">
-							@foreach (var tag in BlogPost.Tags)
-							{
-								<a class="goto-tag badge bg-primary rounded-pill text-decoration-none" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
-							}
-						</span>
+						<div class="d-flex align-items-center">
+							<span class="blogpost-tag me-2"></span>
+							<div class="d-flex flex-wrap gap-2">
+								@foreach (var tag in BlogPost.Tags)
+								{
+									<a class="goto-tag badge bg-primary rounded-pill text-decoration-none" href="/searchByTag/@(Uri.EscapeDataString(tag))">@tag</a>
+								}
+							</div>
+						</div>
 					}
 				</div>