From 9594e1fee8b468d75d0fb3f0d2a438fc6b77a67e Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Wed, 14 May 2025 10:08:03 +0000
Subject: [PATCH] chore: minor ui fixes (#1793)

---
 .../app/routes/_recipient+/sign.$token+/complete.tsx  |  2 +-
 packages/ui/components/signing-card.tsx               | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx b/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
index b5fd51709..d39b64c9d 100644
--- a/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
+++ b/apps/remix/app/routes/_recipient+/sign.$token+/complete.tsx
@@ -119,7 +119,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
   return (
     <div
       className={cn(
-        '-mx-4 flex flex-col items-center overflow-x-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
+        '-mx-4 flex flex-col items-center overflow-hidden px-4 pt-24 md:-mx-8 md:px-8 lg:pt-36 xl:pt-44',
         { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
       )}
     >
diff --git a/packages/ui/components/signing-card.tsx b/packages/ui/components/signing-card.tsx
index be891d289..d6465e5e4 100644
--- a/packages/ui/components/signing-card.tsx
+++ b/packages/ui/components/signing-card.tsx
@@ -24,7 +24,7 @@ export const SigningCard = ({
   signingCelebrationImage,
 }: SigningCardProps) => {
   return (
-    <div className={cn('relative w-full max-w-xs md:max-w-sm', className)}>
+    <div className={cn('relative w-full max-w-sm md:max-w-md', className)}>
       <SigningCardContent name={name} signature={signature} />
 
       {signingCelebrationImage && (
@@ -48,7 +48,7 @@ export const SigningCard3D = ({
 
   const [trackMouse, setTrackMouse] = useState(false);
 
-  const timeoutRef = useRef<NodeJS.Timeout>();
+  const timeoutRef = useRef<number | undefined>();
 
   const cardX = useMotionValue(0);
   const cardY = useMotionValue(0);
@@ -103,7 +103,7 @@ export const SigningCard3D = ({
       clearTimeout(timeoutRef.current);
 
       // Revert the card back to the center position after the mouse stops moving.
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         void animate(cardX, 0, { duration: 2, ease: 'backInOut' });
         void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
 
@@ -120,12 +120,15 @@ export const SigningCard3D = ({
 
     return () => {
       window.removeEventListener('mousemove', onMouseMove);
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+      }
     };
   }, [onMouseMove]);
 
   return (
     <div
-      className={cn('relative w-full max-w-xs md:max-w-sm', className)}
+      className={cn('relative w-full max-w-sm md:max-w-md', className)}
       style={{ perspective: 800 }}
     >
       <motion.div