Revert "[resumes][refactor] tweak resume review page UI"

This reverts commit 29abea1cd9.

apps/portal/src/components/global/AppShell.tsx

@@ -194,7 +194,7 @@ export default function AppShell({ children }: Props) {
                 <span className="sr-only">Open sidebar</span>
                 <Bars3BottomLeftIcon aria-hidden="true" className="h-6 w-6" />
               </button>
-              <div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
+              <div className="flex flex-1 justify-between px-4 sm:px-6">
                 <div className="flex flex-1 items-center">
                   <ProductNavigation
                     items={currentProductNavigation.navigation}

apps/portal/src/components/resumes/ResumePdf.tsx

@@ -36,9 +36,9 @@ export default function ResumePdf({ url }: Props) {
 
   return (
     <div className="w-full" id="pdfView">
-      <div className="group relative bg-slate-100">
+      <div className="group relative">
         <Document
-          className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto py-8"
+          className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto"
           file={url}
           loading={<Spinner display="block" size="lg" />}
           noData=""
@@ -79,7 +79,7 @@ export default function ResumePdf({ url }: Props) {
           </div>
         </Document>
       </div>
-      <div className="flex justify-center border-t border-slate-200 bg-white py-4">
+      <div className="flex justify-center p-4">
         <Pagination
           current={pageNumber}
           end={numPages}

apps/portal/src/components/resumes/badges/ResumeUserBadges.tsx

@@ -39,22 +39,18 @@ export default function ResumeUserBadges({ userId }: Props) {
     topUpvotedCommentCount: userTopUpvotedCommentCountQuery.data ?? 0,
   };
 
-  const badges = RESUME_USER_BADGES.filter((badge) => badge.isValid(payload));
-
-  if (badges.length === 0) {
-    return null;
-  }
-
   return (
     <div className="flex items-center justify-center gap-1">
-      {badges.map((badge) => (
+      {RESUME_USER_BADGES.filter((badge) => badge.isValid(payload)).map(
+        (badge) => (
           <ResumeUserBadge
             key={badge.id}
             description={badge.description}
             icon={badge.icon}
             title={badge.title}
           />
-      ))}
+        ),
+      )}
     </div>
   );
 }

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { formatDistanceToNow } from 'date-fns';
 import { useState } from 'react';
+import { ChevronUpIcon } from '@heroicons/react/20/solid';
 import { FaceSmileIcon } from '@heroicons/react/24/outline';
 
 import ResumeCommentEditForm from './comment/ResumeCommentEditForm';
@@ -11,10 +12,10 @@ import ResumeExpandableText from '../shared/ResumeExpandableText';
 
 import type { ResumeComment } from '~/types/resume-comments';
 
-type ResumeCommentListItemProps = Readonly<{
+type ResumeCommentListItemProps = {
   comment: ResumeComment;
   userId: string | undefined;
-}>;
+};
 
 export default function ResumeCommentListItem({
   comment,
@@ -27,14 +28,14 @@ export default function ResumeCommentListItem({
 
   return (
     <div className="min-w-fit">
-      <div className="flex flex-row space-x-3 align-top">
+      <div className="flex flex-row space-x-2 p-1 align-top">
         {/* Image Icon */}
         {comment.user.image ? (
           <img
             alt={comment.user.name ?? 'Reviewer'}
             className={clsx(
               'mt-1 rounded-full',
-              comment.parentId ? 'h-8 w-8' : 'h-10 w-10',
+              comment.parentId ? 'h-6 w-6' : 'h-8 w-8 ',
             )}
             src={comment.user.image!}
           />
@@ -49,18 +50,24 @@ export default function ResumeCommentListItem({
 
         <div className="flex w-full flex-col space-y-1">
           {/* Name and creation time */}
-          <div className="flex flex-row items-center space-x-2">
-            <p className={clsx('text-sm font-medium text-slate-800')}>
+          <div className="flex flex-row justify-between">
+            <div className="flex flex-row items-center space-x-1">
+              <p
+                className={clsx(
+                  'font-medium text-gray-800',
+                  !!comment.parentId && 'text-sm',
+                )}>
                 {comment.user.name ?? 'Reviewer ABC'}
               </p>
-            {isCommentOwner && (
-              <span className="bg-primary-100 text-primary-800 rounded-md py-0.5 px-1 text-xs">
-                Me
-              </span>
-            )}
+
+              <p className="text-primary-800 text-xs font-medium">
+                {isCommentOwner ? '(Me)' : ''}
+              </p>
+
               <ResumeUserBadges userId={comment.user.userId} />
-            <span className="font-medium text-slate-500">&middot;</span>
-            <div className="text-xs text-slate-500">
+            </div>
+
+            <div className="px-2 text-xs text-slate-600">
               {formatDistanceToNow(comment.createdAt, {
                 addSuffix: true,
               })}
@@ -74,7 +81,7 @@ export default function ResumeCommentListItem({
               setIsEditingComment={setIsEditingComment}
             />
           ) : (
-            <div className="text-slate-800">
+            <div className="text-gray-800">
               <ResumeExpandableText
                 key={comment.description}
                 text={comment.description}
@@ -83,42 +90,56 @@ export default function ResumeCommentListItem({
           )}
 
           {/* Upvote and edit */}
-          <div className="flex flex-row space-x-2 pt-1 align-middle">
+          <div className="flex flex-row space-x-1 pt-1 align-middle">
             <ResumeCommentVoteButtons commentId={comment.id} userId={userId} />
+
             {/* Action buttons; only present for authenticated user when not editing/replying */}
             {userId && !isEditingComment && !isReplyingComment && (
               <>
                 {isCommentOwner && (
-                  <>
-                    <span className="font-medium text-slate-500">&middot;</span>{' '}
                   <button
-                      className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600"
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
                     type="button"
                     onClick={() => setIsEditingComment(true)}>
                     Edit
                   </button>
-                  </>
                 )}
+
                 {!comment.parentId && (
-                  <>
-                    <span className="font-medium text-slate-500">&middot;</span>{' '}
                   <button
-                      className="px-1 text-xs font-medium text-slate-500 hover:text-slate-600"
+                    className="text-primary-800 hover:text-primary-400 px-1 text-xs"
                     type="button"
                     onClick={() => setIsReplyingComment(true)}>
                     Reply
                   </button>
-                  </>
                 )}
               </>
             )}
+          </div>
+
+          {/* Reply Form */}
+          {isReplyingComment && (
+            <ResumeCommentReplyForm
+              parentId={comment.id}
+              resumeId={comment.resumeId}
+              section={comment.section}
+              setIsReplyingComment={setIsReplyingComment}
+            />
+          )}
+
+          {/* Replies */}
           {comment.children.length > 0 && (
-              <>
-                <span className="font-medium text-slate-500">&middot;</span>{' '}
+            <div className="min-w-fit space-y-1 pt-2">
               <button
-                  className="flex items-center space-x-1 rounded-md text-xs font-medium text-slate-500 hover:text-slate-600"
+                className="text-primary-800 hover:text-primary-300 flex items-center space-x-1 rounded-md text-xs font-medium"
                 type="button"
                 onClick={() => setShowReplies(!showReplies)}>
+                <ChevronUpIcon
+                  className={clsx(
+                    'h-5 w-5 ',
+                    !showReplies && 'rotate-180 transform',
+                  )}
+                />
                 <span>
                   {showReplies
                     ? `Hide ${
@@ -129,24 +150,13 @@ export default function ResumeCommentListItem({
                       }`}
                 </span>
               </button>
-              </>
-            )}
-          </div>
 
-          {/* Reply Form */}
-          {isReplyingComment && (
-            <ResumeCommentReplyForm
-              parentId={comment.id}
-              resumeId={comment.resumeId}
-              section={comment.section}
-              setIsReplyingComment={setIsReplyingComment}
-            />
-          )}
+              {showReplies && (
+                <div className="flex flex-row">
+                  <div className="relative flex flex-col px-2 py-2">
+                    <div className="flex-grow border-r border-slate-300" />
+                  </div>
 
-          {/* Replies */}
-          {comment.children.length > 0 && showReplies && (
-            <div className="min-w-fit space-y-1 pt-2">
-              <div className="flex flex-row border-l-2 border-slate-200 pl-2">
                   <div className="flex flex-1 flex-col space-y-1">
                     {comment.children.map((child) => {
                       return (
@@ -159,6 +169,7 @@ export default function ResumeCommentListItem({
                     })}
                   </div>
                 </div>
+              )}
             </div>
           )}
         </div>

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

@@ -115,12 +115,10 @@ export default function ResumeCommentsForm({
   };
 
   return (
-    <div className="overflow-y-auto py-8 px-4 lg:h-[calc(100vh-13rem)]">
-      <h2 className="text-xl font-medium text-slate-800">
-        Contribute a review
-      </h2>
-      <p className="mt-1 text-slate-600">
-        Please fill in at least one section to submit a review.
+    <div className="h-[calc(100vh-13rem)] overflow-y-auto pb-4">
+      <h2 className="text-xl font-semibold text-slate-800">Add your review</h2>
+      <p className="text-slate-800">
+        Please fill in at least one section to submit your review
       </p>
 
       <form

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

@@ -1,7 +1,9 @@
+import clsx from 'clsx';
 import { useSession } from 'next-auth/react';
 import {
   BookOpenIcon,
   BriefcaseIcon,
+  ChatBubbleLeftRightIcon,
   CodeBracketSquareIcon,
   FaceSmileIcon,
   IdentificationIcon,
@@ -29,7 +31,7 @@ export default function ResumeCommentsList({
   const commentsQuery = trpc.useQuery(['resumes.comments.list', { resumeId }]);
 
   const renderIcon = (section: ResumesSection) => {
-    const className = 'h-5 w-5';
+    const className = 'h-7 w-7';
     switch (section) {
       case ResumesSection.GENERAL:
         return <IdentificationIcon className={className} />;
@@ -55,7 +57,7 @@ export default function ResumeCommentsList({
   }
 
   return (
-    <div className="flow-root w-full space-y-4 overflow-y-auto overflow-x-hidden px-4 lg:h-[calc(100vh-12rem)] lg:py-8">
+    <div className="flow-root w-full flex-col space-y-10 overflow-y-auto overflow-x-hidden lg:h-[calc(100vh-13rem)]">
       {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
         const comments = commentsQuery.data
           ? commentsQuery.data.filter((comment: ResumeComment) => {
@@ -65,19 +67,22 @@ export default function ResumeCommentsList({
         const commentCount = comments.length;
 
         return (
-          <div
-            key={value}
-            className="rounded-lg border border-slate-200 bg-white shadow-sm">
+          <div key={value} className="space-y-4 pr-4">
             {/* CommentHeader Section */}
-            <div className="flex items-center space-x-2 border-b border-slate-200 px-4 py-3 font-medium text-slate-700">
+            <div className="text-primary-800 flex items-center space-x-2">
+              <hr className="flex-grow border-slate-800" />
               {renderIcon(value)}
-              <span className="w-fit text-sm font-medium uppercase tracking-wide">
-                {label}
-              </span>
+
+              <span className="w-fit text-lg font-medium">{label}</span>
+              <hr className="flex-grow border-slate-800" />
             </div>
 
             {/* Comment Section */}
-            <div className="space-y-4 px-4 py-3">
+            <div
+              className={clsx(
+                'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
+                commentCount ? 'border-slate-300' : 'border-slate-300',
+              )}>
               {commentCount > 0 ? (
                 comments.map((comment) => {
                   return (
@@ -90,8 +95,10 @@ export default function ResumeCommentsList({
                 })
               ) : (
                 <div className="flex flex-row items-center text-sm">
+                  <ChatBubbleLeftRightIcon className="mr-2 h-6 w-6 text-slate-500" />
+
                   <div className="text-slate-500">
-                    There are no comments for this section.
+                    There are no comments for this section yet!
                   </div>
                 </div>
               )}

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

@@ -77,7 +77,8 @@ export default function ResumeCommentReplyForm({
   };
 
   return (
-    <form className="space-y-2" onSubmit={handleSubmit(onSubmit)}>
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="flex-column space-y-2 pt-2">
         <TextArea
           {...(register('description', {
             required: 'Reply cannot be empty!',
@@ -109,6 +110,7 @@ export default function ResumeCommentReplyForm({
             variant="primary"
           />
         </div>
+      </div>
     </form>
   );
 }

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

@@ -1,7 +1,10 @@
 import clsx from 'clsx';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/solid';
+import {
+  ArrowDownCircleIcon,
+  ArrowUpCircleIcon,
+} from '@heroicons/react/20/solid';
 import { Vote } from '@prisma/client';
 
 import { useGoogleAnalytics } from '~/components/global/GoogleAnalytics';
@@ -89,9 +92,8 @@ export default function ResumeCommentVoteButtons({
   };
 
   return (
-    <div className="flex items-center">
+    <>
       <button
-        className="-m-1 rounded-full p-1 hover:bg-slate-100"
         disabled={
           commentVotesQuery.isLoading ||
           commentVotesUpsertMutation.isLoading ||
@@ -99,36 +101,27 @@ export default function ResumeCommentVoteButtons({
         }
         type="button"
         onClick={() => onVote(Vote.UPVOTE, setUpvoteAnimation)}>
-        <ChevronUpIcon
+        <ArrowUpCircleIcon
           className={clsx(
-            'h-5 w-5',
+            'h-4 w-4',
             commentVotesQuery.data?.userVote?.value === Vote.UPVOTE ||
               upvoteAnimation
-              ? 'text-primary-500'
-              : 'text-slate-400',
+              ? 'fill-primary-500'
+              : 'fill-slate-400',
             userId &&
               !downvoteAnimation &&
               !upvoteAnimation &&
-              'hover:text-primary-500',
+              'hover:fill-primary-500',
             upvoteAnimation && 'animate-[bounce_0.5s_infinite] cursor-default',
           )}
         />
       </button>
-      <div className="mx-1 flex min-w-[1rem] justify-center text-xs font-semibold text-gray-700">
+
+      <div className="flex min-w-[1rem] justify-center text-xs font-semibold text-gray-700">
         {commentVotesQuery.data?.numVotes ?? 0}
       </div>
+
       <button
-        className={clsx(
-          '-m-1 rounded-full p-1 hover:bg-slate-100',
-          commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
-            downvoteAnimation
-            ? 'text-danger-500'
-            : 'text-slate-400',
-          userId &&
-            !downvoteAnimation &&
-            !upvoteAnimation &&
-            'hover:text-danger-500',
-        )}
         disabled={
           commentVotesQuery.isLoading ||
           commentVotesUpsertMutation.isLoading ||
@@ -136,14 +129,22 @@ export default function ResumeCommentVoteButtons({
         }
         type="button"
         onClick={() => onVote(Vote.DOWNVOTE, setDownvoteAnimation)}>
-        <ChevronDownIcon
+        <ArrowDownCircleIcon
           className={clsx(
-            'h-5 w-5',
+            'h-4 w-4',
+            commentVotesQuery.data?.userVote?.value === Vote.DOWNVOTE ||
+              downvoteAnimation
+              ? 'fill-danger-500'
+              : 'fill-slate-400',
+            userId &&
+              !downvoteAnimation &&
+              !upvoteAnimation &&
+              'hover:fill-danger-500',
             downvoteAnimation &&
               'animate-[bounce_0.5s_infinite] cursor-default',
           )}
         />
       </button>
-    </div>
+    </>
   );
 }

apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx

@@ -29,14 +29,14 @@ export default function ResumeExpandableText({
       <span
         ref={ref}
         className={clsx(
-          'line-clamp-3 whitespace-pre-wrap text-xs sm:text-sm',
+          'line-clamp-3 whitespace-pre-wrap text-sm',
           isExpanded ? 'line-clamp-none' : '',
         )}>
         {text}
       </span>
       {descriptionOverflow && (
         <p
-          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs sm:text-sm"
+          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs"
           onClick={onSeeActionClicked}>
           {isExpanded ? 'See Less' : 'See More'}
         </p>

apps/portal/src/pages/resumes/[resumeId].tsx

@@ -180,9 +180,10 @@ export default function ResumeReviewPage() {
   };
 
   const renderReviewButton = () => {
-    if (session == null) {
+    if (session === null) {
       return (
         <Button
+          className="h-10 shadow-md"
           display="block"
           href={loginPageHref()}
           label="Log in to join discussion"
@@ -190,9 +191,9 @@ export default function ResumeReviewPage() {
         />
       );
     }
-
     return (
       <Button
+        className="h-10 shadow-md"
         display="block"
         label="Add your review"
         variant="primary"
@@ -223,35 +224,36 @@ export default function ResumeReviewPage() {
 
   return (
     <>
-      {(detailsQuery.isError || detailsQuery.data == null) && ErrorPage}
+      {(detailsQuery.isError || detailsQuery.data === null) && ErrorPage}
       {detailsQuery.isLoading && (
         <div className="w-full pt-4">
-          <Spinner display="block" size="lg" />
+          {' '}
+          <Spinner display="block" size="lg" />{' '}
         </div>
       )}
       {detailsQuery.isFetched && detailsQuery.data && (
         <>
           <Head>
-            <title>{`${detailsQuery.data.title} | Resume Review`}</title>
+            <title>{detailsQuery.data.title}</title>
           </Head>
-          <main className="h-full w-full bg-white">
-            <div className="mx-auto space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 md:space-y-2 lg:px-8">
-              <div className="flex flex-wrap justify-between space-y-4 lg:space-y-0">
-                <h1 className="pr-2 text-xl font-medium leading-7 text-slate-900 sm:text-2xl lg:w-[60%]">
+          <main className="h-full flex-1 space-y-2 py-4 px-8 xl:px-12 2xl:pr-16">
+            <div className="flex flex-wrap justify-between">
+              <h1 className="w-[60%] pr-2 text-2xl font-semibold leading-7 text-slate-900">
                 {detailsQuery.data.title}
               </h1>
-                <div className="flex gap-3">
+              <div className="flex gap-3 xl:pr-4">
                 {userIsOwner && (
                   <>
                     <Button
                       addonPosition="start"
+                      className="h-10 shadow-md"
                       icon={PencilSquareIcon}
                       label="Edit"
                       variant="tertiary"
                       onClick={onEditButtonClick}
                     />
                     <button
-                        className="isolate inline-flex items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
+                      className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
                       disabled={resolveMutation.isLoading}
                       type="button"
                       onClick={onResolveButtonClick}>
@@ -276,10 +278,8 @@ export default function ResumeReviewPage() {
                   </>
                 )}
                 <button
-                    className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
-                    disabled={
-                      starMutation.isLoading || unstarMutation.isLoading
-                    }
+                  className="isolate inline-flex h-10 items-center space-x-4 rounded-md border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-md hover:bg-slate-50 focus:ring-slate-600 disabled:hover:bg-white"
+                  disabled={starMutation.isLoading || unstarMutation.isLoading}
                   type="button"
                   onClick={onStarButtonClick}>
                   <div className="-ml-1 mr-2 h-5 w-5">
@@ -306,9 +306,8 @@ export default function ResumeReviewPage() {
                 <div className="hidden xl:block">{renderReviewButton()}</div>
               </div>
             </div>
-              <div className="space-y-2">
-                <div className="grid grid-cols-2 gap-2 md:flex md:flex-wrap md:space-x-8">
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
+            <div className="flex flex-col lg:mt-0 lg:flex-row lg:flex-wrap lg:space-x-8">
+              <div className="mt-2 flex items-center text-sm text-slate-600 xl:mt-1">
                 <BriefcaseIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@@ -321,13 +320,10 @@ export default function ResumeReviewPage() {
                       roleLabel: detailsQuery.data?.role,
                     })
                   }>
-                      {getFilterLabel(
-                        ROLES,
-                        detailsQuery.data.role as RoleFilter,
-                      )}
+                  {getFilterLabel(ROLES, detailsQuery.data.role as RoleFilter)}
                 </button>
               </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <MapPinIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@@ -346,7 +342,7 @@ export default function ResumeReviewPage() {
                   )}
                 </button>
               </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <AcademicCapIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@@ -365,21 +361,18 @@ export default function ResumeReviewPage() {
                   )}
                 </button>
               </div>
-                  <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
+              <div className="flex items-center pt-2 text-sm text-slate-600 xl:pt-1">
                 <CalendarIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
                 />
-                    {`Uploaded ${formatDistanceToNow(
-                      detailsQuery.data.createdAt,
-                      {
+                {`Uploaded ${formatDistanceToNow(detailsQuery.data.createdAt, {
                   addSuffix: true,
-                      },
-                    )} by ${detailsQuery.data.user.name}`}
+                })} by ${detailsQuery.data.user.name}`}
               </div>
             </div>
             {detailsQuery.data.additionalInfo && (
-                  <div className="col-span-2 flex items-start whitespace-pre-wrap pt-2 text-slate-600 xl:pt-1">
+              <div className="flex items-start whitespace-pre-wrap pt-2 text-sm text-slate-600 xl:pt-1">
                 <InformationCircleIcon
                   aria-hidden="true"
                   className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@@ -390,25 +383,23 @@ export default function ResumeReviewPage() {
                 />
               </div>
             )}
-              </div>
-            </div>
-            <div className="flex w-full flex-col divide-x divide-slate-200 py-4 lg:flex-row xl:py-0">
-              <div className="w-full bg-slate-100 lg:w-1/2">
+
+            <div className="flex w-full flex-col gap-6 py-4 xl:flex-row xl:py-0">
+              <div className="w-full xl:w-1/2">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
-              <div className="grow border-t border-slate-200 bg-slate-50 lg:border-none">
-                <div className="divide-y divide-slate-200 lg:hidden">
-                  <div className="bg-white p-4 lg:p-0">
+              <div className="grow">
+                <div className="mb-6 space-y-4 xl:hidden">
                   {renderReviewButton()}
-                  </div>
-                  {!showCommentsForm && (
-                    <div className="p-4 lg:p-0">
-                      <h2 className="text-xl font-medium text-slate-900">
+                  <div className="flex items-center space-x-2">
+                    <hr className="flex-grow border-slate-300" />
+                    <span className="bg-slate-50 px-3 text-lg font-medium text-slate-900">
                       Reviews
-                      </h2>
+                    </span>
+                    <hr className="flex-grow border-slate-300" />
                   </div>
-                  )}
                 </div>
+
                 {showCommentsForm ? (
                   <ResumeCommentsForm
                     resumeId={resumeId as string}