[resumes][feat] shift badge to bottom

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

@@ -14,15 +14,15 @@ export default function ResumeUserBadge({
   return (
     <div className="group relative flex items-center justify-center">
       <div
-        className="h-34 absolute left-6 z-10 hidden w-48 flex-col justify-center
+        className="absolute top-7 z-10 hidden h-36 w-48 flex-col justify-center
         gap-1 rounded-xl bg-white pb-2 text-center drop-shadow-lg
 
-        before:absolute before:top-14 before:-translate-x-4
+        after:absolute after:left-1/2 after:top-[-11%] after:-translate-x-1/2
-        before:border-8 before:border-y-transparent before:border-l-transparent
+        after:border-8 after:border-x-transparent after:border-t-transparent
-        before:border-r-white before:drop-shadow-lg before:content-['']
+        after:border-b-slate-200 after:drop-shadow-sm after:content-['']
         group-hover:flex">
         <Icon className="h-16 w-full self-center rounded-t-xl bg-slate-200 py-2" />
-        <div className="px-2">
+        <div className="flex h-20 flex-col justify-evenly px-2">
           <p className="font-medium">{title}</p>
           <p className="text-sm">{description}.</p>
         </div>

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

@@ -55,7 +55,7 @@ export default function ResumeCommentsList({
           <Spinner display="block" size="lg" />
         </div>
       ) : (
-        <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden">
+        <div className="mb-8 flow-root h-[calc(100vh-13rem)] w-full flex-col space-y-4 overflow-y-auto overflow-x-hidden pb-16">
           {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
             const comments = commentsQuery.data
               ? commentsQuery.data.filter((comment: ResumeComment) => {
@@ -65,14 +65,13 @@ export default function ResumeCommentsList({
             const commentCount = comments.length;
 
             return (
-              <div key={value} className="mb-4 space-y-4">
+              <div key={value} className="space-y-6 pr-4">
-                <div className="text-primary-800 flex flex-row items-center space-x-2">
+                <div className="text-primary-800 -mb-2 flex flex-row items-center space-x-2">
                   {renderIcon(value)}
 
                   <div className="w-fit text-lg font-medium">{label}</div>
                 </div>
 
-                <div className="w-full space-y-4 pr-4">
                 <div
                   className={clsx(
                     'space-y-2 rounded-md border-2 bg-white px-4 py-3 drop-shadow-md',
@@ -98,11 +97,8 @@ export default function ResumeCommentsList({
                     </div>
                   )}
                 </div>
-                </div>
 
-                <div className="relative flex flex-row pr-6 pt-2">
+                <hr className="border-gray-300" />
-                  <div className="flex-grow border-t border-gray-300" />
-                </div>
               </div>
             );
           })}