From ec1487b33bbe71d849fe8fa9e5d20f7181e10df9 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 5 Nov 2022 18:04:44 +0800
Subject: [PATCH] [resumes][refactor] make height calculation more robust

---
 .../src/components/resumes/ResumePdf.tsx      |   8 +-
 .../comments/ResumeCommentListItem.tsx        |   4 +-
 .../resumes/comments/ResumeCommentsForm.tsx   |   2 +-
 .../resumes/comments/ResumeCommentsList.tsx   |   2 +-
 .../resumes/shared/ResumeExpandableText.tsx   |   9 +-
 apps/portal/src/pages/resumes/[resumeId].tsx  | 140 +++++++++---------
 6 files changed, 87 insertions(+), 78 deletions(-)

diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index 0cada39a..ea0bddba 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -35,10 +35,12 @@ export default function ResumePdf({ url }: Props) {
   }, [pageWidth]);
 
   return (
-    <div className="w-full" id="pdfView">
-      <div className="group relative bg-slate-100">
+    <div
+      className="w-full flex-col overflow-y-auto lg:flex lg:h-full"
+      id="pdfView">
+      <div className="group relative grow bg-slate-100 lg:h-0">
         <Document
-          className="flex h-[calc(100vh-16rem)] flex-row justify-center overflow-auto py-8"
+          className="flex flex-row justify-center overflow-auto py-8 lg:h-full"
           file={url}
           loading={<Spinner display="block" size="lg" />}
           noData=""
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
index 881c4d85..af749a63 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentListItem.tsx
@@ -92,7 +92,7 @@ export default function ResumeCommentListItem({
                   <>
                     <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-xs font-medium text-slate-500 hover:text-slate-600"
                       type="button"
                       onClick={() => setIsEditingComment(true)}>
                       Edit
@@ -103,7 +103,7 @@ export default function ResumeCommentListItem({
                   <>
                     <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-xs font-medium text-slate-500 hover:text-slate-600"
                       type="button"
                       onClick={() => setIsReplyingComment(true)}>
                       Reply
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
index 2f78aec6..3a12a41f 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsForm.tsx
@@ -115,7 +115,7 @@ export default function ResumeCommentsForm({
   };
 
   return (
-    <div className="overflow-y-auto py-8 px-4 lg:h-[calc(100vh-13rem)]">
+    <div className="overflow-y-auto py-8 px-4">
       <h2 className="text-xl font-medium text-slate-800">
         Contribute a review
       </h2>
diff --git a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
index 74ff159b..0cc910a4 100644
--- a/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
+++ b/apps/portal/src/components/resumes/comments/ResumeCommentsList.tsx
@@ -55,7 +55,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 space-y-4 overflow-y-auto overflow-x-hidden px-4 lg:py-8">
       {RESUME_COMMENTS_SECTIONS.map(({ label, value }) => {
         const comments = commentsQuery.data
           ? commentsQuery.data.filter((comment: ResumeComment) => {
diff --git a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
index 2111d505..a8c1d083 100644
--- a/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
+++ b/apps/portal/src/components/resumes/shared/ResumeExpandableText.tsx
@@ -25,7 +25,7 @@ export default function ResumeExpandableText({
   };
 
   return (
-    <div>
+    <div className="space-y-1">
       <span
         ref={ref}
         className={clsx(
@@ -35,11 +35,12 @@ export default function ResumeExpandableText({
         {text}
       </span>
       {descriptionOverflow && (
-        <p
-          className="text-primary-500 hover:text-primary-300 mt-1 cursor-pointer text-xs sm:text-sm"
+        <button
+          className="text-primary-500 hover:text-primary-600 text-xs font-medium"
+          type="button"
           onClick={onSeeActionClicked}>
           {isExpanded ? 'See Less' : 'See More'}
-        </p>
+        </button>
       )}
     </div>
   );
diff --git a/apps/portal/src/pages/resumes/[resumeId].tsx b/apps/portal/src/pages/resumes/[resumeId].tsx
index 54992a15..ba7d9f42 100644
--- a/apps/portal/src/pages/resumes/[resumeId].tsx
+++ b/apps/portal/src/pages/resumes/[resumeId].tsx
@@ -235,80 +235,86 @@ export default function ResumeReviewPage() {
           <Head>
             <title>{`${detailsQuery.data.title} | Resume Review`}</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 lg: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="flex h-[calc(100vh-4rem)] w-full flex-col bg-white">
+            <div className="mx-auto w-full space-y-4 border-b border-slate-200 px-4 py-6 sm:px-6 lg:px-8">
+              <div className="justify-between gap-4 space-y-4 lg:flex lg:space-y-0">
+                <h1 className="pr-2 text-xl font-medium leading-7 text-slate-900">
                   {detailsQuery.data.title}
                 </h1>
                 <div className="flex gap-3">
                   {userIsOwner && (
                     <>
-                      <Button
-                        addonPosition="start"
-                        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"
-                        disabled={resolveMutation.isLoading}
-                        type="button"
-                        onClick={onResolveButtonClick}>
-                        <div className="-ml-1 mr-2 h-5 w-5">
-                          {resolveMutation.isLoading ? (
-                            <Spinner className="mt-0.5" size="xs" />
-                          ) : (
-                            <CheckCircleIcon
-                              aria-hidden="true"
-                              className={
-                                isResumeResolved
-                                  ? 'text-slate-500'
-                                  : 'text-success-600'
-                              }
-                            />
-                          )}
-                        </div>
-                        {isResumeResolved
-                          ? 'Reopen for review'
-                          : 'Mark as reviewed'}
-                      </button>
+                      <div>
+                        <Button
+                          addonPosition="start"
+                          icon={PencilSquareIcon}
+                          label="Edit"
+                          variant="tertiary"
+                          onClick={onEditButtonClick}
+                        />
+                      </div>
+                      <div>
+                        <button
+                          className="isolate inline-flex items-center space-x-4 whitespace-nowrap 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={resolveMutation.isLoading}
+                          type="button"
+                          onClick={onResolveButtonClick}>
+                          <div className="-ml-1 mr-2 h-5 w-5">
+                            {resolveMutation.isLoading ? (
+                              <Spinner className="mt-0.5" size="xs" />
+                            ) : (
+                              <CheckCircleIcon
+                                aria-hidden="true"
+                                className={
+                                  isResumeResolved
+                                    ? 'text-slate-500'
+                                    : 'text-success-600'
+                                }
+                              />
+                            )}
+                          </div>
+                          {isResumeResolved
+                            ? 'Reopen for review'
+                            : 'Mark as reviewed'}
+                        </button>
+                      </div>
                     </>
                   )}
-                  <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
-                    }
-                    type="button"
-                    onClick={onStarButtonClick}>
-                    <div className="-ml-1 mr-2 h-5 w-5">
-                      {starMutation.isLoading ||
-                      unstarMutation.isLoading ||
-                      detailsQuery.isLoading ? (
-                        <Spinner className="mt-0.5" size="xs" />
-                      ) : (
-                        <StarIcon
-                          aria-hidden="true"
-                          className={clsx(
-                            detailsQuery.data?.stars.length
-                              ? 'text-orange-400'
-                              : 'text-slate-400',
-                          )}
-                        />
-                      )}
-                    </div>
-                    {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
-                    <span className="relative -ml-px inline-flex">
-                      {detailsQuery.data?._count.stars}
-                    </span>
-                  </button>
+                  <div>
+                    <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"
+                      disabled={
+                        starMutation.isLoading || unstarMutation.isLoading
+                      }
+                      type="button"
+                      onClick={onStarButtonClick}>
+                      <div className="-ml-1 mr-2 h-5 w-5">
+                        {starMutation.isLoading ||
+                        unstarMutation.isLoading ||
+                        detailsQuery.isLoading ? (
+                          <Spinner className="mt-0.5" size="xs" />
+                        ) : (
+                          <StarIcon
+                            aria-hidden="true"
+                            className={clsx(
+                              detailsQuery.data?.stars.length
+                                ? 'text-orange-400'
+                                : 'text-slate-400',
+                            )}
+                          />
+                        )}
+                      </div>
+                      {detailsQuery.data?.stars.length ? 'Starred' : 'Star'}
+                      <span className="relative -ml-px inline-flex">
+                        {detailsQuery.data?._count.stars}
+                      </span>
+                    </button>
+                  </div>
                   <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="grid grid-cols-2 gap-2 lg:flex lg:flex-wrap lg:space-x-8">
                   <div className="col-span-1 flex items-center text-xs text-slate-600 sm:text-sm">
                     <BriefcaseIcon
                       aria-hidden="true"
@@ -380,7 +386,7 @@ export default function ResumeReviewPage() {
                   </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="col-span-2 flex items-start whitespace-pre-wrap text-slate-600 xl:pt-1">
                     <InformationCircleIcon
                       aria-hidden="true"
                       className="mr-1.5 h-5 w-5 flex-shrink-0 text-indigo-400"
@@ -393,11 +399,11 @@ export default function ResumeReviewPage() {
                 )}
               </div>
             </div>
-            <div className="flex w-full flex-col divide-x divide-slate-200 lg:flex-row xl:py-0">
-              <div className="w-full bg-slate-100 lg:w-1/2">
+            <div className="flex w-full shrink-0 grow flex-col divide-x divide-slate-200 overflow-hidden lg:h-0 lg:flex-row xl:py-0">
+              <div className="w-full bg-slate-100 lg:h-full lg:w-1/2">
                 <ResumePdf url={detailsQuery.data.url} />
               </div>
-              <div className="grow border-t border-slate-200 bg-slate-50 pb-4 lg:border-none lg:pb-0">
+              <div className="grow overflow-y-auto border-t border-slate-200 bg-slate-50 pb-4 lg:h-full lg:border-t-0 lg:pb-0">
                 <div className="divide-y divide-slate-200 lg:hidden">
                   <div className="bg-white p-4 lg:p-0">
                     {renderReviewButton()}