From 966cf2e8d6f69f09e9d9bebaaa189b495281e795 Mon Sep 17 00:00:00 2001
From: Wu Peirong <wupeirong294@gmail.com>
Date: Sat, 15 Oct 2022 23:14:21 +0800
Subject: [PATCH] [resumes][fix] fix zoomed resume left side cut off

---
 .../src/components/resumes/ResumePdf.tsx      | 42 +++++++++++++++----
 1 file changed, 34 insertions(+), 8 deletions(-)

diff --git a/apps/portal/src/components/resumes/ResumePdf.tsx b/apps/portal/src/components/resumes/ResumePdf.tsx
index 668d0f6f..563571c5 100644
--- a/apps/portal/src/components/resumes/ResumePdf.tsx
+++ b/apps/portal/src/components/resumes/ResumePdf.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react';
+import clsx from 'clsx';
+import { useEffect, useState } from 'react';
 import { Document, Page, pdfjs } from 'react-pdf';
 import type { PDFDocumentProxy } from 'react-pdf/node_modules/pdfjs-dist';
 import {
@@ -18,14 +19,30 @@ type Props = Readonly<{
 export default function ResumePdf({ url }: Props) {
   const [numPages, setNumPages] = useState(0);
   const [pageNumber, setPageNumber] = useState(1);
-  const [scale, setScale] = useState(1);
+  const [pageWidth, setPageWidth] = useState(750);
+  const [componentWidth, setComponentWidth] = useState(780);
 
   const onPdfLoadSuccess = (pdf: PDFDocumentProxy) => {
     setNumPages(pdf.numPages);
   };
 
+  useEffect(() => {
+    const onPageResize = () => {
+      setComponentWidth(
+        document.querySelector('#pdfView')?.getBoundingClientRect().width ??
+          780,
+      );
+    };
+
+    window.addEventListener('resize', onPageResize);
+
+    return () => {
+      window.removeEventListener('resize', onPageResize);
+    };
+  }, []);
+
   return (
-    <div>
+    <div id="pdfView">
       <div className="group relative">
         <Document
           className="flex h-[calc(100vh-17rem)] flex-row justify-center overflow-auto"
@@ -33,25 +50,34 @@ export default function ResumePdf({ url }: Props) {
           loading={<Spinner display="block" size="lg" />}
           noData=""
           onLoadSuccess={onPdfLoadSuccess}>
-          <Page pageNumber={pageNumber} scale={scale} width={750} />
+          <div
+            style={{
+              paddingLeft: clsx(
+                pageWidth > componentWidth
+                  ? `${pageWidth - componentWidth}px`
+                  : '',
+              ),
+            }}>
+            <Page pageNumber={pageNumber} width={pageWidth} />
+          </div>
           <div className="absolute top-2 right-5 hidden hover:block group-hover:block">
             <Button
               className="rounded-r-none focus:ring-0 focus:ring-offset-0"
-              disabled={scale === 0.5}
+              disabled={pageWidth === 450}
               icon={MagnifyingGlassMinusIcon}
               isLabelHidden={true}
               label="Zoom Out"
               variant="tertiary"
-              onClick={() => setScale(scale - 0.25)}
+              onClick={() => setPageWidth(pageWidth - 150)}
             />
             <Button
               className="rounded-l-none focus:ring-0 focus:ring-offset-0"
-              disabled={scale === 1.5}
+              disabled={pageWidth === 1050}
               icon={MagnifyingGlassPlusIcon}
               isLabelHidden={true}
               label="Zoom In"
               variant="tertiary"
-              onClick={() => setScale(scale + 0.25)}
+              onClick={() => setPageWidth(pageWidth + 150)}
             />
           </div>
         </Document>