From c11c6fc1819b5302af9c7e28a47eee81aeeba4e6 Mon Sep 17 00:00:00 2001
From: ephraimduncan <ephraimduncan68@gmail.com>
Date: Thu, 16 Jul 2026 16:39:02 +0000
Subject: [PATCH] fix: align document actions dropdown responsively

---
 .../document/document-page-view-dropdown.tsx  | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/apps/remix/app/components/general/document/document-page-view-dropdown.tsx b/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
index df012b680..5fc782acd 100644
--- a/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
+++ b/apps/remix/app/components/general/document/document-page-view-dropdown.tsx
@@ -27,7 +27,7 @@ import {
   Share,
   Trash2,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, useNavigate } from 'react-router';
 
 import { EnvelopeDeleteDialog } from '~/components/dialogs/envelope-delete-dialog';
@@ -53,6 +53,21 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
 
   const [isRenameDialogOpen, setRenameDialogOpen] = useState(false);
   const [isSaveAsTemplateDialogOpen, setSaveAsTemplateDialogOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkIfMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkIfMobile();
+
+    window.addEventListener('resize', checkIfMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkIfMobile);
+    };
+  }, []);
 
   const recipient = envelope.recipients.find((recipient) => recipient.email === user.email);
 
@@ -74,7 +89,7 @@ export const DocumentPageViewDropdown = ({ envelope }: DocumentPageViewDropdownP
         <MoreHorizontal className="h-5 w-5 text-muted-foreground" />
       </DropdownMenuTrigger>
 
-      <DropdownMenuContent className="w-52" align="start" forceMount>
+      <DropdownMenuContent className="w-52" align={isMobile ? 'end' : 'start'} forceMount>
         <DropdownMenuLabel>
           <Trans>Action</Trans>
         </DropdownMenuLabel>