chore: minor ui fixes (#1793)

This commit is contained in:
Ephraim Duncan
2025-05-14 10:08:03 +00:00
committed by GitHub
parent 5e3a2b8f76
commit 9594e1fee8
2 changed files with 8 additions and 5 deletions

View File

@ -119,7 +119,7 @@ export default function CompletedSigningPage({ loaderData }: Route.ComponentProp
return ( return (
<div <div
className={cn( 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 }, { 'pt-0 lg:pt-0 xl:pt-0': canSignUp },
)} )}
> >

View File

@ -24,7 +24,7 @@ export const SigningCard = ({
signingCelebrationImage, signingCelebrationImage,
}: SigningCardProps) => { }: SigningCardProps) => {
return ( 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} /> <SigningCardContent name={name} signature={signature} />
{signingCelebrationImage && ( {signingCelebrationImage && (
@ -48,7 +48,7 @@ export const SigningCard3D = ({
const [trackMouse, setTrackMouse] = useState(false); const [trackMouse, setTrackMouse] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout>(); const timeoutRef = useRef<number | undefined>();
const cardX = useMotionValue(0); const cardX = useMotionValue(0);
const cardY = useMotionValue(0); const cardY = useMotionValue(0);
@ -103,7 +103,7 @@ export const SigningCard3D = ({
clearTimeout(timeoutRef.current); clearTimeout(timeoutRef.current);
// Revert the card back to the center position after the mouse stops moving. // 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(cardX, 0, { duration: 2, ease: 'backInOut' });
void animate(cardY, 0, { duration: 2, ease: 'backInOut' }); void animate(cardY, 0, { duration: 2, ease: 'backInOut' });
@ -120,12 +120,15 @@ export const SigningCard3D = ({
return () => { return () => {
window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('mousemove', onMouseMove);
if (timeoutRef.current) {
window.clearTimeout(timeoutRef.current);
}
}; };
}, [onMouseMove]); }, [onMouseMove]);
return ( return (
<div <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 }} style={{ perspective: 800 }}
> >
<motion.div <motion.div