fix: resolve issues with signing document stickiness

apps/web/src/app/(signing)/sign/[token]/complete/page.tsx

@@ -53,7 +53,7 @@ export default async function CompletedSigningPage({
     recipient.email;
 
   return (
-    <div className="flex flex-col items-center pt-24 lg:pt-36 xl:pt-44">
+    <div className="-mx-4 flex max-w-[100vw] flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44">
       {/* Card with recipient */}
       <SigningCard3D name={recipientName} signingCelebrationImage={signingCelebration} />
 

apps/web/src/app/(signing)/sign/[token]/complete/share-button.tsx

@@ -106,7 +106,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
         </Button>
       </DialogTrigger>
 
-      <DialogContent>
+      <DialogContent position="end">
         <DialogHeader>
           <DialogTitle>Share</DialogTitle>
 
@@ -119,7 +119,7 @@ export const ShareButton = ({ token, documentId }: ShareButtonProps) => {
             <span className="font-medium text-blue-400">@documenso</span>
             . Check it out!
             <span className="mt-2 block" />
-            <span className="font-medium text-blue-400">
+            <span className="break-all font-medium text-blue-400">
               {window.location.origin}/share/{shareLink?.slug || '...'}
             </span>
           </div>

apps/web/src/app/(signing)/sign/[token]/form.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { useSession } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
 
 import { completeDocumentWithToken } from '@documenso/lib/server-only/document/complete-document-with-token';
@@ -27,6 +28,7 @@ export type SigningFormProps = {
 
 export const SigningForm = ({ document, recipient, fields }: SigningFormProps) => {
   const router = useRouter();
+  const { data: session } = useSession();
 
   const { fullName, signature, setFullName, setSignature } = useRequiredSigningContext();
 
@@ -60,7 +62,11 @@ export const SigningForm = ({ document, recipient, fields }: SigningFormProps) =
   return (
     <form
       className={cn(
-        'dark:bg-background border-border bg-widget sticky top-20 flex h-full max-h-[80rem] flex-col rounded-xl border px-4 py-6',
+        'dark:bg-background border-border bg-widget sticky flex h-full flex-col rounded-xl border px-4 py-6',
+        {
+          'top-20 max-h-[min(68rem,calc(100vh-6rem))]': session,
+          'top-4 max-h-[min(68rem,calc(100vh-2rem))]': !session,
+        },
       )}
       onSubmit={handleSubmit(onFormSubmit)}
     >

apps/web/src/app/(signing)/sign/[token]/layout.tsx

@@ -10,11 +10,11 @@ export type SigningLayoutProps = {
 };
 
 export default async function SigningLayout({ children }: SigningLayoutProps) {
-  const user = await getServerComponentSession();
+  const { user, session } = await getServerComponentSession();
 
   return (
-    <NextAuthProvider>
-      <div className="min-h-screen overflow-hidden">
+    <NextAuthProvider session={session}>
+      <div className="min-h-screen">
         {user && <AuthenticatedHeader user={user} />}
 
         <main className="mb-8 mt-8 px-4 md:mb-12 md:mt-12 md:px-8">{children}</main>

apps/web/src/app/(signing)/sign/[token]/page.tsx

@@ -51,7 +51,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
     .then((buffer) => Buffer.from(buffer).toString('base64'))
     .then((data) => `data:application/pdf;base64,${data}`);
 
-  const user = await getServerComponentSession();
+  const { user } = await getServerComponentSession();
 
   if (
     document.status === DocumentStatus.COMPLETED ||
@@ -62,7 +62,7 @@ export default async function SigningPage({ params: { token } }: SigningPageProp
 
   return (
     <SigningProvider email={recipient.email} fullName={recipient.name} signature={user?.signature}>
-      <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+      <div className="mx-auto w-full max-w-screen-xl">
         <h1 className="mt-4 truncate text-2xl font-semibold md:text-3xl" title={document.title}>
           {document.title}
         </h1>