[resumes][refactor] Comment UI touchup (#405)

* [resumes][refactor] add vertical line to replies

* [resumes][refactor] sort replies ascending

Co-authored-by: Terence Ho <>

apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx

@@ -144,16 +144,25 @@ export default function ResumeCommentListItem({
                 <span>{showReplies ? 'Hide replies' : 'Show replies'}</span>
               </button>
 
-              {showReplies &&
+              {showReplies && (
-                comment.children.map((child) => {
+                <div className="flex flex-row">
-                  return (
+                  <div className="relative flex flex-col px-2 py-2">
-                    <ResumeCommentListItem
+                    <div className="flex-grow border-r border-gray-300" />
-                      key={child.id}
+                  </div>
-                      comment={child}
+
-                      userId={userId}
+                  <div className="flex flex-col space-y-1">
-                    />
+                    {comment.children.map((child) => {
-                  );
+                      return (
-                })}
+                        <ResumeCommentListItem
+                          key={child.id}
+                          comment={child}
+                          userId={userId}
+                        />
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
             </div>
           )}
         </div>

apps/portal/src/components/resumes/comments/comment/ResumeCommentVoteButtons.tsx

@@ -97,7 +97,9 @@ export default function ResumeCommentVoteButtons({
         />
       </button>
 
-      <div className="text-xs">{commentVotesQuery.data?.numVotes ?? 0}</div>
+      <div className="flex min-w-[1rem] justify-center text-xs">
+        {commentVotesQuery.data?.numVotes ?? 0}
+      </div>
 
       <button
         disabled={

apps/portal/src/server/router/resumes/resumes-comments-router.ts

@@ -25,7 +25,7 @@ export const resumeCommentsRouter = createRouter().query('list', {
             },
           },
           orderBy: {
-            createdAt: 'desc',
+            createdAt: 'asc',
           },
         },
         user: {