From 06079e3e7e092fb351d7e26bea47b71c8fb3b6a5 Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Thu, 6 Oct 2022 11:09:52 +0800
Subject: [PATCH] [resumes][fix] Manually calculate height for pdf view instead

---
 .../portal/src/components/global/AppShell.tsx |  2 +-
 .../src/components/resumes/ResumePdf.tsx      | 42 +++++++++----------
 apps/portal/src/pages/resumes/review.tsx      |  2 +-
 3 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/apps/portal/src/components/global/AppShell.tsx b/apps/portal/src/components/global/AppShell.tsx
index 70f37335..fde9d3b6 100644
--- a/apps/portal/src/components/global/AppShell.tsx
+++ b/apps/portal/src/components/global/AppShell.tsx
@@ -112,7 +112,7 @@ export default function AppShell({ children }: Props) {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <div className="flex h-screen">
+    <div className="flex h-full min-h-screen">
       {/* Narrow sidebar */}
       <div className="hidden w-28 overflow-y-auto bg-indigo-700 md:block">
         <div className="flex w-full flex-col items-center py-6">
diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index 2b6309b9..12debea4 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -15,35 +15,33 @@ export default function ResumePdf() {
   };
 
   return (
-    <div className="flex h-full flex-col">
+    <div>
       <Document
-        className="max-h-full basis-5/6 overflow-y-scroll"
+        className="h-[calc(100vh-17rem)] overflow-scroll"
         file="/test_resume.pdf"
         loading={<Spinner display="block" label="" size="lg" />}
         onLoadSuccess={onPdfLoadSuccess}>
         <Page pageNumber={pageNumber} />
       </Document>
 
-      <div className="basis-1/6">
-        <div className="flex flex-row items-center justify-between p-4">
-          <Button
-            disabled={pageNumber === 1}
-            icon={ArrowLeftIcon}
-            isLabelHidden={true}
-            label="Previous"
-            variant="tertiary"
-          />
-          <p className="text-md text-gray-600">
-            Page {pageNumber} of {numPages}
-          </p>
-          <Button
-            disabled={pageNumber === numPages}
-            icon={ArrowRightIcon}
-            isLabelHidden={true}
-            label="Next"
-            variant="tertiary"
-          />
-        </div>
+      <div className="flex flex-row items-center justify-between p-4">
+        <Button
+          disabled={pageNumber === 1}
+          icon={ArrowLeftIcon}
+          isLabelHidden={true}
+          label="Previous"
+          variant="tertiary"
+        />
+        <p className="text-md text-gray-600">
+          Page {pageNumber} of {numPages}
+        </p>
+        <Button
+          disabled={pageNumber === numPages}
+          icon={ArrowRightIcon}
+          isLabelHidden={true}
+          label="Next"
+          variant="tertiary"
+        />
       </div>
     </div>
   );
diff --git a/apps/portal/src/pages/resumes/review.tsx b/apps/portal/src/pages/resumes/review.tsx
index 1e033d03..0624989c 100644
--- a/apps/portal/src/pages/resumes/review.tsx
+++ b/apps/portal/src/pages/resumes/review.tsx
@@ -12,7 +12,7 @@ import ResumePdf from '~/components/resumes/ResumePdf';
 
 export default function ResumeReviewPage() {
   return (
-    <main className="h-full w-full flex-1 p-4">
+    <main className="flex-1 p-4">
       <div className="flex flex-row md:space-x-8">
         <h1 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
           Please help moi, applying for medtech startups in Singapore