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">
WATonomous · Aug 29, 2024 · 861739b · 861739b
1 parent 19742ee
commit 861739b
Showing 1 changed file with 5 additions and 5 deletions.
diff --git 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} />
                                 ))}