[resumes][fix] Fix viewport height not set

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-full min-h-screen">
+    <div className="flex 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">

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

@@ -15,32 +15,35 @@ export default function ResumePdf() {
   };
 
   return (
-    <div className="mb-12 h-screen">
+    <div className="flex h-full flex-col">
       <Document
+        className="max-h-full basis-5/6 overflow-y-scroll"
         file="/test_resume.pdf"
         loading={<Spinner display="block" label="" size="lg" />}
         onLoadSuccess={onPdfLoadSuccess}>
         <Page pageNumber={pageNumber} />
       </Document>
 
-      <div className="m-4 flex h-10 flex-row items-center justify-between">
-        <Button
-          icon={ArrowLeftIcon}
-          isDisabled={pageNumber === 1}
-          isLabelHidden={true}
-          label="Previous"
-          variant="tertiary"
-        />
-        <p className="text-md text-gray-600">
-          Page {pageNumber} of {numPages}
-        </p>
-        <Button
-          icon={ArrowRightIcon}
-          isDisabled={pageNumber === numPages}
-          isLabelHidden={true}
-          label="Next"
-          variant="tertiary"
-        />
+      <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>
     </div>
   );

apps/portal/src/pages/resumes/review.tsx

@@ -12,7 +12,7 @@ import ResumePdf from '~/components/resumes/ResumePdf';
 
 export default function ResumeReviewPage() {
   return (
-    <main className="m-4 flex-1">
+    <main className="h-full w-full 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
@@ -30,7 +30,7 @@ export default function ResumeReviewPage() {
           <span className="relative -ml-px inline-flex">12k</span>
         </button>
       </div>
-      <div className="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-8">
+      <div className="flex flex-col pt-1 sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-8">
         <div className="mt-2 flex items-center text-sm text-gray-500">
           <BriefcaseIcon
             aria-hidden="true"
@@ -38,21 +38,21 @@ export default function ResumeReviewPage() {
           />
           Software Engineer (Backend)
         </div>
-        <div className="mt-2 flex items-center text-sm text-gray-500">
+        <div className="flex items-center pt-2 text-sm text-gray-500">
           <MapPinIcon
             aria-hidden="true"
             className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
           />
           Singapore
         </div>
-        <div className="mt-2 flex items-center text-sm text-gray-500">
+        <div className="flex items-center pt-2 text-sm text-gray-500">
           <AcademicCapIcon
             aria-hidden="true"
             className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
           />
           Fresh Grad
         </div>
-        <div className="mt-2 flex items-center text-sm text-gray-500">
+        <div className="flex items-center pt-2 text-sm text-gray-500">
           <CalendarIcon
             aria-hidden="true"
             className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
@@ -60,7 +60,7 @@ export default function ResumeReviewPage() {
           Uploaded 2 days ago by Git Ji Ra
         </div>
       </div>
-      <div className="mt-2 flex items-center text-sm text-gray-500">
+      <div className="flex items-center pt-2 text-sm text-gray-500">
         <InformationCircleIcon
           aria-hidden="true"
           className="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400"
@@ -68,8 +68,8 @@ export default function ResumeReviewPage() {
         Looking to break into SWE roles after doing engineering for the past 2
         years
       </div>
-      <div className="my-4 flex max-h-full w-full flex-row">
-        <div className="max-h-screen w-1/2 overflow-scroll">
+      <div className="flex h-full w-full flex-row py-4">
+        <div className="w-1/2">
           <ResumePdf />
         </div>
         <div className="mx-8 w-1/2">