fix(upvote button): make upvote button smaller and not shrink when de…

…scription is long. Fixes mcnaveen#4 mcnaveen#5.
vignesh-udhay · Oct 10, 2024 · 13ebfb3 · 13ebfb3
1 parent 91e19d7
commit 13ebfb3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 29 deletions.
diff --git a/app/[slug]/[board]/(main)/[...post]/page.tsx b/app/[slug]/[board]/(main)/[...post]/page.tsx
@@ -41,7 +41,7 @@ export default async function PostPage({
   }
 
   const isUpvoted = post?.upvotes.some(
-    (upvote) => upvote.user.id === session?.user?.id,
+    (upvote) => upvote.user.id === session?.user?.id
   );
 
   return (
@@ -52,18 +52,20 @@ export default async function PostPage({
           Back
         </Button>
       </Link>
-      <header className="flex flex-col items-start rounded-t-lg border-b border-gray-200 bg-gray-100 px-4 py-4 pb-8 dark:border-gray-700 dark:bg-[#0A0A0A] dark:text-gray-200 sm:flex-row sm:items-center sm:px-6">
-        <UpvoteButton
-          isUpvoted={isUpvoted}
-          postId={post.id}
-          upvoteCount={post?._count.upvotes}
-          userId={session?.user?.id as string}
-        />
-        <div className="ml-0 mt-4 sm:ml-4 sm:mt-0">
+      <header className="flex gap-4 rounded-t-lg border-b border-gray-200 bg-gray-100 px-4 py-4 pb-8 dark:border-gray-700 dark:bg-[#0A0A0A] dark:text-gray-200 sm:flex-row sm:items-center sm:px-6">
+        <div className="flex-shrink-0">
+          <UpvoteButton
+            isUpvoted={isUpvoted}
+            postId={post.id}
+            upvoteCount={post?._count.upvotes}
+            userId={session?.user?.id as string}
+          />
+        </div>
+        <div className="flex-grow min-w-0 mt-4 sm:mt-0">
           <h2 className="text-xl font-bold text-gray-800 dark:text-gray-200 sm:text-2xl">
             {post.title}
           </h2>
-          <p className="mt-1 flex flex-wrap text-sm text-gray-600 dark:text-gray-300">
+          <p className="mt-1 break-words whitespace-pre-wrap text-sm text-gray-600 dark:text-gray-300">
             {post?.description
               ?.split(/(https?:\/\/[^\s]+)/g)
               .map((part, index) =>
@@ -73,7 +75,7 @@ export default async function PostPage({
                   </LinkRenderer>
                 ) : (
                   part
-                ),
+                )
               )}
           </p>
           <p className="mt-1 text-xs text-gray-600 dark:text-gray-300 sm:text-sm">

diff --git a/components/posts/card.tsx b/components/posts/card.tsx
@@ -43,21 +43,20 @@ export const PostsCard: React.FC<PostsCardProps> = ({
 }) => {
   const upvoteCount = post?.upvoteCount ? post.upvoteCount : 0;
   const isUpvoted = post?.upvotes.some(
-    (upvote) => upvote.userId === currentUserId,
+    (upvote) => upvote.userId === currentUserId
   );
 
   const ListLayout = () => (
     <Card className="data-[hover-state-enabled=true]:hover:drop-shadow-card-hover mb-2 w-full rounded-xl border border-gray-200 bg-white transition-[filter] dark:border-gray-800 dark:bg-black">
       <CardHeader className="flex flex-row items-center gap-3 p-3">
-        <div className="flex w-full items-center justify-start">
-          <div className="mr-2 flex-shrink-0">
-            <UpvoteButton
-              isUpvoted={isUpvoted}
-              postId={post?.id}
-              upvoteCount={upvoteCount}
-              userId={currentUserId}
-            />
-          </div>
+        <div className="flex w-full items-center justify-start gap-4">
+          <UpvoteButton
+            isUpvoted={isUpvoted}
+            postId={post?.id}
+            upvoteCount={upvoteCount}
+            userId={currentUserId}
+          />
+
           <div className="min-w-0 flex-grow">
             <CardTitle className="flex items-center gap-2 truncate text-base">
               {post.title}
@@ -94,7 +93,8 @@ export const PostsCard: React.FC<PostsCardProps> = ({
               </div>
             </div>
           </div>
-          <div className="ml-2 flex-shrink-0">
+
+          <div className="flex-shrink-0">
             {hasAccess && (
               <Options
                 currentUserId={currentUserId}

diff --git a/components/posts/upvote.tsx b/components/posts/upvote.tsx
@@ -80,23 +80,24 @@ export const UpvoteButton = ({
   return (
     <>
       <Button
-        className={`h-12 w-12 rounded-xl ${isActive ? "border-blue-200 bg-blue-100" : ""}`}
+        className={`h-12 w-10 flex-col rounded-xl ${isActive ? "border-blue-200 bg-blue-100" : ""}`}
         size="icon"
         variant={"outline"}
         onClick={
           session.status === "authenticated" ? handleUpvote : handleLoginDialog
         }
       >
-        <span className="flex flex-col items-center">
-          <ChevronUp
-            className={`h-4 w-4 ${isActive ? "font-bold text-blue-500" : ""}`}
-          />
+        <ChevronUp
+          className={isActive ? "font-bold text-blue-500" : ""}
+          size={16}
+        />
+        {count && (
           <span
             className={`text-xs ${isActive ? "font-bold text-blue-500" : ""}`}
           >
-            {count ? numify(count) : null}
+            {numify(count)}
           </span>
-        </span>
+        )}
       </Button>
       <LoginDialog open={showLoginDialog} onOpenChange={setShowLoginDialog} />
     </>