fix: remove auto-expand in embeddding

apps/web/src/app/embed/direct/[[...url]]/client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { useSearchParams } from 'next/navigation';
 
@@ -83,15 +83,12 @@ export const EmbedDirectTemplateClientPage = ({
   const [hasCompletedDocument, setHasCompletedDocument] = useState(false);
 
   const [isExpanded, setIsExpanded] = useState(false);
-  const [hasAutoExpanded, setHasAutoExpanded] = useState(false);
 
   const [isEmailLocked, setIsEmailLocked] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
 
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
-  const documentEndRef = useRef<HTMLDivElement>(null);
-
   const [throttledOnCompleteClick, isThrottled] = useThrottleFn(() => void onCompleteClick(), 500);
 
   const [localFields, setLocalFields] = useState<DirectTemplateLocalField[]>(() => fields);
@@ -320,43 +317,6 @@ export const EmbedDirectTemplateClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
-  // Set up intersection observer to auto-expand widget when user reaches bottom of document
-  useEffect(() => {
-    if (!hasDocumentLoaded || !hasFinishedInit || hasAutoExpanded || isExpanded) {
-      return;
-    }
-
-    // Add a delay to ensure document has fully rendered and stabilized
-    const timeoutId = setTimeout(() => {
-      // Get the number of pages in the document
-      const pageCount = document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR).length;
-
-      // Only set up the observer if there's more than one page
-      if (pageCount <= 1) return;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const [entry] = entries;
-
-          if (entry.isIntersecting) {
-            setIsExpanded(true);
-            setHasAutoExpanded(true);
-            observer.disconnect();
-          }
-        },
-        { threshold: 1.0 },
-      );
-
-      if (documentEndRef.current) {
-        observer.observe(documentEndRef.current);
-      }
-    }, 1500); // 1.5 second delay
-
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [hasDocumentLoaded, hasFinishedInit, hasAutoExpanded, isExpanded]);
-
   if (hasCompletedDocument) {
     return (
       <EmbedDocumentCompleted
@@ -384,14 +344,12 @@ export const EmbedDirectTemplateClientPage = ({
             documentData={documentData}
             onDocumentLoad={() => setHasDocumentLoaded(true)}
           />
-          {/* Observer target at the bottom of the document */}
-          <div ref={documentEndRef} className="h-4 w-full" />
         </div>
 
         {/* Widget */}
         <div
           key={isExpanded ? 'expanded' : 'collapsed'}
-          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+          className="group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
           data-expanded={isExpanded || undefined}
         >
           <div className="border-border bg-widget flex h-fit w-full flex-col rounded-xl border px-4 py-4 md:min-h-[min(calc(100dvh-2rem),48rem)] md:py-6">

apps/web/src/app/embed/direct/[[...url]]/page.tsx

@@ -110,7 +110,9 @@ export default async function EmbedDirectTemplatePage({ params }: EmbedDirectTem
             recipient={recipient}
             fields={fields}
             metadata={template.templateMeta}
-            hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+            hidePoweredBy={
+              isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+            }
             allowWhiteLabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           />
         </RecipientProvider>

apps/web/src/app/embed/sign/[[...url]]/client.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useId, useLayoutEffect, useState } from 'react';
 
 import { Trans, msg } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -91,14 +91,11 @@ export const EmbedSignDocumentClientPage = ({
   );
 
   const [isExpanded, setIsExpanded] = useState(false);
-  const [hasAutoExpanded, setHasAutoExpanded] = useState(false);
   const [isNameLocked, setIsNameLocked] = useState(false);
   const [showPendingFieldTooltip, setShowPendingFieldTooltip] = useState(false);
 
   const [allowDocumentRejection, setAllowDocumentRejection] = useState(false);
 
-  const documentEndRef = useRef<HTMLDivElement>(null);
-
   const selectedSigner = allRecipients.find((r) => r.id === selectedSignerId);
   const isAssistantMode = recipient.role === RecipientRole.ASSISTANT;
 
@@ -244,42 +241,6 @@ export const EmbedSignDocumentClientPage = ({
     }
   }, [hasFinishedInit, hasDocumentLoaded]);
 
-  // Set up intersection observer to auto-expand widget when user reaches bottom of document
-  useEffect(() => {
-    if (!hasDocumentLoaded || !hasFinishedInit || hasAutoExpanded || isExpanded) {
-      return;
-    }
-
-    // Add a delay to ensure document has fully rendered and stabilized
-    const timeoutId = setTimeout(() => {
-      const pageCount = document.querySelectorAll(PDF_VIEWER_PAGE_SELECTOR).length;
-
-      // Only set up the observer if there's more than one page
-      if (pageCount <= 1) return;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const [entry] = entries;
-
-          if (entry.isIntersecting) {
-            setIsExpanded(true);
-            setHasAutoExpanded(true);
-            observer.disconnect();
-          }
-        },
-        { threshold: 1.0 },
-      );
-
-      if (documentEndRef.current) {
-        observer.observe(documentEndRef.current);
-      }
-    }, 1500); // 1.5 second delay
-
-    return () => {
-      clearTimeout(timeoutId);
-    };
-  }, [hasDocumentLoaded, hasFinishedInit, hasAutoExpanded, isExpanded]);
-
   if (hasRejectedDocument) {
     return <EmbedDocumentRejected name={fullName} />;
   }
@@ -322,14 +283,12 @@ export const EmbedSignDocumentClientPage = ({
               documentData={documentData}
               onDocumentLoad={() => setHasDocumentLoaded(true)}
             />
-            {/* Observer target at the bottom of the document */}
-            <div ref={documentEndRef} className="h-4 w-full" />
           </div>
 
           {/* Widget */}
           <div
             key={isExpanded ? 'expanded' : 'collapsed'}
-            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
+            className="embed--DocumentWidgetContainer group/document-widget fixed bottom-8 left-0 z-50 h-fit max-h-[calc(100dvh-2rem)] w-full flex-shrink-0 px-6 md:sticky md:top-4 md:z-auto md:w-[350px] md:px-0"
             data-expanded={isExpanded || undefined}
           >
             <div className="embed--DocumentWidget border-border bg-widget flex w-full flex-col rounded-xl border px-4 py-4 md:py-6">

apps/web/src/app/embed/sign/[[...url]]/page.tsx

@@ -131,7 +131,9 @@ export default async function EmbedSignDocumentPage({ params }: EmbedSignDocumen
           fields={fields}
           metadata={document.documentMeta}
           isCompleted={document.status === DocumentStatus.COMPLETED}
-          hidePoweredBy={isPlatformDocument || isEnterpriseDocument || hidePoweredBy}
+          hidePoweredBy={
+            isCommunityPlan || isPlatformDocument || isEnterpriseDocument || hidePoweredBy
+          }
           allowWhitelabelling={isCommunityPlan || isPlatformDocument || isEnterpriseDocument}
           allRecipients={allRecipients}
         />