fix(upvote button): reduced upvote button size and unintentional shrinking

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">

components/boards/card.tsx

@@ -1,14 +1,15 @@
-import { numify } from "numify";
 import { useSession } from "next-auth/react";
+import { numify } from "numify";
 
 import {
   Card,
-  CardHeader,
+  CardDescription,
   CardFooter,
-  CardContent,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
-import { Board } from "@/types/board";
 import { formatBoardType } from "@/helpers/common/formatBoardType";
+import { Board } from "@/types/board";
 
 import { Badge } from "../ui/badge";
 
@@ -60,47 +61,41 @@ export const BoardsCard: React.FC<BoardsCardProps> = ({
   );
 
   const GridLayout = () => (
-    <Card className="flex h-full flex-col overflow-hidden rounded-xl bg-card">
-      <CardHeader className="p-4">
-        <h3 className="text-lg font-bold">
-          {board.name.substring(0, 28)}
-          {board.name.length > 28 ? "..." : ""}
-        </h3>
-      </CardHeader>
-      <CardContent>
-        <p>
+    <Card className="h-full flex flex-col">
+      <CardHeader className="grow">
+        <CardTitle className="truncate">{board.name}</CardTitle>
+        <CardDescription>
           {board.description.length > 100
             ? `${board.description.substring(0, 100)}...`
             : board.description}
-        </p>
-      </CardContent>
-      <CardFooter className="bg-secondary p-4">
-        <div className="flex w-full flex-row justify-between">
-          <div className="flex flex-row gap-2">
-            {session && !board?.isPrivate && (
-              <Badge
-                className="bg-green-200 text-xs text-green-900"
-                variant="outline"
-              >
-                Public
-              </Badge>
-            )}
-            {board?.isPrivate && (
-              <Badge
-                className="bg-red-100 text-xs text-red-700"
-                variant="outline"
-              >
-                Private
-              </Badge>
-            )}
-            <Badge className="text-xs" variant="outline">
-              {formatBoardType(board.boardType)}
+        </CardDescription>
+      </CardHeader>
+      <CardFooter className="bg-secondary pt-6 justify-between">
+        <div className="flex gap-2">
+          {session && !board?.isPrivate && (
+            <Badge
+              className="bg-green-200 text-xs text-green-900"
+              variant="outline"
+            >
+              Public
+            </Badge>
+          )}
+          {board?.isPrivate && (
+            <Badge
+              className="bg-red-100 text-xs text-red-700"
+              variant="outline"
+            >
+              Private
             </Badge>
-          </div>
+          )}
           <Badge className="text-xs" variant="outline">
-            {board?._count?.posts ? numify(board?._count.posts) : "0"}
+            {formatBoardType(board.boardType)}
           </Badge>
         </div>
+
+        <Badge className="text-xs" variant="outline">
+          {board?._count?.posts ? numify(board?._count.posts) : "0"}
+        </Badge>
       </CardFooter>
     </Card>
   );

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}

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} />
     </>