fix: pdf viewer scroll elements

apps/remix/app/components/dialogs/document-duplicate-dialog.tsx

@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
@@ -38,6 +40,8 @@ export const DocumentDuplicateDialog = ({
 
   const team = useCurrentTeam();
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const { data: envelopeItemsPayload, isLoading: isLoadingEnvelopeItems } =
     trpcReact.envelope.item.getManyByToken.useQuery(
       {
@@ -95,12 +99,13 @@ export const DocumentDuplicateDialog = ({
             </h1>
           </div>
         ) : (
-          <div className="p-2 [&>div]:h-[50vh] [&>div]:overflow-y-scroll">
+          <div ref={scrollContainerRef} className="h-[50vh] overflow-y-scroll p-2">
             <PDFViewer
               key={envelopeItems[0].id}
               envelopeItem={envelopeItems[0]}
               token={undefined}
               version="initial"
+              scrollParentRef={scrollContainerRef}
             />
           </div>
         )}

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -551,6 +551,7 @@ export const ConfigureFieldsView = ({
                   envelopeItem={normalizedEnvelopeItem}
                   token={undefined}
                   version="current"
+                  scrollParentRef="window"
                 />
 
                 <ElementVisible

apps/remix/app/components/embed/embed-direct-template-client-page.tsx

@@ -345,6 +345,7 @@ export const EmbedDirectTemplateClientPage = ({
             envelopeItem={envelopeItems[0]}
             token={recipient.token}
             version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
         </div>

apps/remix/app/components/embed/embed-document-signing-page-v1.tsx

@@ -291,6 +291,7 @@ export const EmbedSignDocumentV1ClientPage = ({
               envelopeItem={envelopeItems[0]}
               token={token}
               version="current"
+              scrollParentRef="window"
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
           </div>

apps/remix/app/components/embed/multisign/multi-sign-document-signing-view.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
@@ -66,6 +66,8 @@ export const MultiSignDocumentSigningView = ({
 
   const [hasDocumentLoaded, setHasDocumentLoaded] = useState(false);
 
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
   const [isExpanded, setIsExpanded] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
@@ -179,7 +181,11 @@ export const MultiSignDocumentSigningView = ({
 
   return (
     <div className="min-h-screen overflow-hidden bg-background">
-      <div id="document-field-portal-root" className="relative h-full w-full overflow-y-auto p-8">
+      <div
+        id="document-field-portal-root"
+        ref={scrollContainerRef}
+        className="relative h-full w-full overflow-y-auto p-8"
+      >
         {match({ isLoading, document })
           .with({ isLoading: true }, () => (
             <div className="flex min-h-[400px] w-full items-center justify-center">
@@ -230,6 +236,7 @@ export const MultiSignDocumentSigningView = ({
                     envelopeItem={document.envelopeItems[0]}
                     token={token}
                     version="current"
+                    scrollParentRef={scrollContainerRef}
                     onDocumentLoad={() => {
                       setHasDocumentLoaded(true);
                       onDocumentReady?.();

apps/remix/app/components/general/direct-template/direct-template-page.tsx

@@ -156,6 +156,7 @@ export const DirectTemplatePageView = ({
             envelopeItem={template.envelopeItems[0]}
             token={directTemplateRecipient.token}
             version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/document-signing/document-signing-page-view-v1.tsx

@@ -279,6 +279,7 @@ export const DocumentSigningPageViewV1 = ({
                   envelopeItem={document.envelopeItems[0]}
                   token={recipient.token}
                   version="current"
+                  scrollParentRef="window"
                 />
               </CardContent>
             </Card>

apps/remix/app/components/general/document-signing/document-signing-page-view-v2.tsx

@@ -1,4 +1,4 @@
-import { lazy, useMemo } from 'react';
+import { lazy, useMemo, useRef } from 'react';
 
 import { Plural, Trans } from '@lingui/react/macro';
 import { EnvelopeType, RecipientRole } from '@prisma/client';
@@ -41,6 +41,8 @@ const EnvelopeSignerPageRenderer = lazy(
 export const DocumentSigningPageViewV2 = () => {
   const { envelopeItems, currentEnvelopeItem, setCurrentEnvelopeItem } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const {
     isDirectTemplate,
     envelope,
@@ -200,7 +202,10 @@ export const DocumentSigningPageViewV2 = () => {
           </div>
         </div>
 
-        <div className="embed--DocumentContainer flex-1 overflow-y-auto">
+        <div
+          className="embed--DocumentContainer flex-1 overflow-y-auto"
+          ref={scrollableContainerRef}
+        >
           <div className="flex flex-col">
             {/* Horizontal envelope item selector */}
             {envelopeItems.length > 1 && (
@@ -232,6 +237,7 @@ export const DocumentSigningPageViewV2 = () => {
                 <EnvelopePdfViewer
                   key={currentEnvelopeItem.id}
                   customPageRenderer={EnvelopeSignerPageRenderer}
+                  scrollParentRef={scrollableContainerRef}
                   errorMessage={PDF_VIEWER_ERROR_MESSAGES.signing}
                 />
               ) : (

apps/remix/app/components/general/document/document-certificate-qr-view.tsx

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useState } from 'react';
+import { lazy, useEffect, useRef, useState } from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { type DocumentData, DocumentStatus, type EnvelopeItem, EnvelopeType } from '@prisma/client';
@@ -157,6 +157,7 @@ export const DocumentCertificateQRView = ({
               envelopeItem={envelopeItems[0]}
               token={token}
               version="current"
+              scrollParentRef="window"
             />
           </div>
         </>
@@ -180,6 +181,8 @@ const DocumentCertificateQrV2 = ({
 }: DocumentCertificateQrV2Props) => {
   const { envelopeItems } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   return (
     <div className="flex min-h-screen flex-col items-start">
       <div className="flex w-full flex-col justify-between gap-4 md:flex-row md:items-end">
@@ -210,11 +213,12 @@ const DocumentCertificateQrV2 = ({
         />
       </div>
 
-      <div className="mt-12 w-full">
+      <div className="mt-12 max-h-[80vh] w-full overflow-y-auto" ref={scrollableContainerRef}>
         <EnvelopeRendererFileSelector className="mb-4 p-0" fields={[]} secondaryOverride={''} />
 
         <EnvelopePdfViewer
           customPageRenderer={EnvelopeGenericPageRenderer}
+          scrollParentRef={scrollableContainerRef}
           errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
         />
       </div>

apps/remix/app/components/general/document/document-edit-form.tsx

@@ -445,6 +445,7 @@ export const DocumentEditForm = ({
             envelopeItem={document.envelopeItems[0]}
             token={undefined}
             version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/components/general/envelope-editor/envelope-editor-preview-page.tsx

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useState } from 'react';
+import { lazy, useEffect, useMemo, useRef, useState } from 'react';
 
 import { faker } from '@faker-js/faker/locale/en';
 import { Trans } from '@lingui/react/macro';
@@ -34,6 +34,8 @@ export const EnvelopeEditorPreviewPage = () => {
 
   const { currentEnvelopeItem, fields } = useCurrentEnvelopeRender();
 
+  const scrollableContainerRef = useRef<HTMLDivElement>(null);
+
   const [selectedPreviewMode, setSelectedPreviewMode] = useState<'recipient' | 'signed'>(
     'recipient',
   );
@@ -214,7 +216,7 @@ export const EnvelopeEditorPreviewPage = () => {
       }}
     >
       <div className="relative flex h-full">
-        <div className="flex w-full flex-col overflow-y-auto">
+        <div className="flex w-full flex-col overflow-y-auto" ref={scrollableContainerRef}>
           {/* Horizontal envelope item selector */}
           <EnvelopeRendererFileSelector fields={editorFields.localFields} />
 
@@ -232,6 +234,7 @@ export const EnvelopeEditorPreviewPage = () => {
             {currentEnvelopeItem !== null ? (
               <EnvelopePdfViewer
                 customPageRenderer={EnvelopeGenericPageRenderer}
+                scrollParentRef={scrollableContainerRef}
                 errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
               />
             ) : (

apps/remix/app/components/general/template/template-edit-form.tsx

@@ -317,6 +317,7 @@ export const TemplateEditForm = ({
             envelopeItem={template.envelopeItems[0]}
             token={undefined}
             version="current"
+            scrollParentRef="window"
             onDocumentLoad={() => setIsDocumentPdfLoaded(true)}
           />
         </CardContent>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/documents.$id._index.tsx

@@ -173,6 +173,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
                 <CardContent className="p-2">
                   <EnvelopePdfViewer
                     customPageRenderer={EnvelopeGenericPageRenderer}
+                    scrollParentRef="window"
                     errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
                   />
                 </CardContent>
@@ -200,6 +201,7 @@ export default function DocumentPage({ params }: Route.ComponentProps) {
                 token={undefined}
                 key={envelope.envelopeItems[0].id}
                 version="current"
+                scrollParentRef="window"
               />
             </CardContent>
           </Card>

apps/remix/app/routes/_authenticated+/t.$teamUrl+/templates.$id._index.tsx

@@ -191,6 +191,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
                 <CardContent className="p-2">
                   <EnvelopePdfViewer
                     customPageRenderer={EnvelopeGenericPageRenderer}
+                    scrollParentRef="window"
                     errorMessage={PDF_VIEWER_ERROR_MESSAGES.preview}
                   />
                 </CardContent>
@@ -217,6 +218,7 @@ export default function TemplatePage({ params }: Route.ComponentProps) {
                 token={undefined}
                 version="current"
                 key={envelope.envelopeItems[0].id}
+                scrollParentRef="window"
               />
             </CardContent>
           </Card>