From d4e259a9a71a9c8c89f9f5aab06b8a2b92a240bf Mon Sep 17 00:00:00 2001
From: Catalin Pit <catalinpit@gmail.com>
Date: Tue, 18 Nov 2025 10:16:13 +0200
Subject: [PATCH] refactor: improve layout of completed signing page

---
 .../_recipient+/sign.$token+/complete.tsx     | 24 ++++++++++++-------
 .../document/document-share-button.tsx        |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx b/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
index eb875fcff..f2ec44790 100644
--- a/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
@@ -202,8 +202,12 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               </p>
             ))}
 
-          <div className="mt-8 flex w-full max-w-sm items-center justify-center gap-4">
-            <DocumentShareButton documentId={document.id} token={recipient.token} />
+          <div className="mt-8 flex w-full max-w-xs flex-col items-stretch gap-4 md:w-auto md:max-w-none md:flex-row md:items-center">
+            <DocumentShareButton
+              documentId={document.id}
+              token={recipient.token}
+              className="w-full max-w-none md:flex-1"
+            />
 
             {isDocumentCompleted(document.status) && (
               <EnvelopeDownloadDialog
@@ -212,13 +216,21 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
                 envelopeItems={document.envelopeItems}
                 token={recipient?.token}
                 trigger={
-                  <Button type="button" variant="outline" className="flex-1">
+                  <Button type="button" variant="outline" className="flex-1 md:flex-initial">
                     <DownloadIcon className="mr-2 h-5 w-5" />
                     <Trans>Download</Trans>
                   </Button>
                 }
               />
             )}
+
+            {user && (
+              <Button asChild>
+                <Link to="/">
+                  <Trans>Go Back Home</Trans>
+                </Link>
+              </Button>
+            )}
           </div>
         </div>
 
@@ -238,12 +250,6 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
               <ClaimAccount defaultName={recipientName} defaultEmail={recipient.email} />
             </div>
           )}
-
-          {user && (
-            <Link to="/" className="text-documenso-700 hover:text-documenso-600 mt-2">
-              <Trans>Go Back Home</Trans>
-            </Link>
-          )}
         </div>
       </div>
 
diff --git a/packages/ui/components/document/document-share-button.tsx b/packages/ui/components/document/document-share-button.tsx
index f546abaeb..3ee434fa8 100644
--- a/packages/ui/components/document/document-share-button.tsx
+++ b/packages/ui/components/document/document-share-button.tsx
@@ -127,11 +127,11 @@ export const DocumentShareButton = ({
           <Button
             variant="outline"
             disabled={!token || !documentId}
-            className={cn('flex-1 text-[11px]', className)}
+            className={cn('w-full max-w-lg flex-1 text-[11px]', className)}
             loading={isLoading}
           >
             {!isLoading && <Sparkles className="mr-2 h-5 w-5" />}
-            <Trans>Share Signature Card</Trans>
+            <Trans>Share</Trans>
           </Button>
         )}
       </DialogTrigger>