From 861739b4a62f57b68821334d70e734ec9be1c912 Mon Sep 17 00:00:00 2001
From: Ben Zhang <ben-z@users.noreply.github.com>
Date: Wed, 28 Aug 2024 21:17:33 -0700
Subject: [PATCH] Improve blog writer/reviewer UI (#3060)

Before:
<img width="1508" alt="image"
src="https://github.com/user-attachments/assets/1c4ef53d-2263-4b9c-bbf0-8ddc7c6a9818">
<img width="1508" alt="image"
src="https://github.com/user-attachments/assets/12ee6bb3-d1df-4496-8b13-15ce2c28b39a">

After:
<img width="1508" alt="image"
src="https://github.com/user-attachments/assets/808368ed-5f71-4aee-835a-b9068539055e">
<img width="1552" alt="image"
src="https://github.com/user-attachments/assets/363d7479-8878-40a1-acf1-5d3fa9967296">
---
 components/blog-post.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/blog-post.tsx b/components/blog-post.tsx
index 774e901..d8faeeb 100644
--- a/components/blog-post.tsx
+++ b/components/blog-post.tsx
@@ -138,11 +138,11 @@ export function BlogPostHeader() {
                 </time>
             </Date>
             <div className="w-full border-b border-gray-400 authors border-opacity-20">
-                <div className="flex justify-between mt-8 mb-2 mx-auto gap-7">
+                <div className="flex justify-center mt-8 mb-2 mx-auto gap-14">
                     {authors && authors.length > 0 && (
-                        <div className={cn("text-center", reviewers?.length > 0 ? "w-1/2" : "w-full")}>
+                        <div className="text-center">
                             <div className="flex justify-center mb-2 text-sm text-gray-500 dark:text-gray-400">Written By</div>
-                            <div className={cn("flex flex-wrap justify-center mb-8 gap-7", authors.length > 4 && "max-w-3xl")}>
+                            <div className="flex flex-wrap justify-center mb-8 gap-7">
                                 {authors.map((author: string) => (
                                     <Avatar key={author} username={author} />
                                 ))}
@@ -151,9 +151,9 @@ export function BlogPostHeader() {
 
                     )}
                     {reviewers && reviewers.length > 0 && (
-                        <div className={cn("text-center", authors?.length > 0 ? "w-1/2": "w-full")}>
+                        <div className="text-center">
                             <div className="flex justify-center mb-2 text-sm text-gray-500 dark:text-gray-400">Reviewed By</div>
-                            <div className={cn("flex flex-wrap justify-center mb-8 gap-7", reviewers.length > 4 && "max-w-3xl")}>
+                            <div className="flex flex-wrap justify-center mb-8 gap-7">
                                 {reviewers.map((reviewer: string) => (
                                     <Avatar key={reviewer} username={reviewer} />
                                 ))}