fix: firefox signing fields

apps/marketing/src/components/(marketing)/single-player-mode/single-player-mode-success.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 import { Share } from 'lucide-react';
 
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
 import { getFile } from '@documenso/lib/universal/upload/get-file';
 import { DocumentWithRecipient } from '@documenso/prisma/types/document-with-recipient';
 import DocumentDialog from '@documenso/ui/components/document/document-dialog';
@@ -29,6 +30,10 @@ export default function SinglePlayerModeSuccess({
   className,
   document,
 }: SinglePlayerModeSuccessProps) {
+  const { getFlag } = useFeatureFlags();
+
+  const isConfettiEnabled = getFlag('marketing_spm_confetti');
+
   const [showDocumentDialog, setShowDocumentDialog] = useState(false);
   const [isFetchingDocumentFile, setIsFetchingDocumentFile] = useState(false);
   const [documentFile, setDocumentFile] = useState<string | null>(null);
@@ -66,7 +71,9 @@ export default function SinglePlayerModeSuccess({
 
   return (
     <div className="flex min-h-[calc(100vh-10rem)] flex-col items-center justify-center sm:min-h-[calc(100vh-13rem)]">
-      <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+      {isConfettiEnabled && (
+        <ConfettiScreen duration={3000} gravity={0.075} initialVelocityY={50} wind={0.005} />
+      )}
 
       <h2 className="text-center text-2xl font-semibold leading-normal md:text-3xl lg:mb-2 lg:text-4xl">
         You have signed

apps/web/src/app/(signing)/sign/[token]/date-field.tsx

@@ -77,7 +77,7 @@ export const DateField = ({ field, recipient }: DateFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}

apps/web/src/app/(signing)/sign/[token]/email-field.tsx

@@ -81,7 +81,7 @@ export const EmailField = ({ field, recipient }: EmailFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}

apps/web/src/app/(signing)/sign/[token]/name-field.tsx

@@ -100,7 +100,7 @@ export const NameField = ({ field, recipient }: NameFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -115,7 +115,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
   return (
     <SigningFieldContainer field={field} onSign={onSign} onRemove={onRemove}>
       {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center">
+        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
           <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
         </div>
       )}

apps/web/src/app/(signing)/sign/[token]/signing-field-container.tsx

@@ -39,12 +39,16 @@ export const SigningFieldContainer = ({
   return (
     <FieldRootContainer field={field}>
       {!field.inserted && !loading && (
-        <button type="submit" className="absolute inset-0 z-10" onClick={onSignFieldClick} />
+        <button
+          type="submit"
+          className="absolute inset-0 z-10 h-full w-full"
+          onClick={onSignFieldClick}
+        />
       )}
 
       {field.inserted && !loading && (
         <button
-          className="text-destructive bg-background/40 absolute inset-0 z-10 flex items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
+          className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 backdrop-blur-sm duration-200 group-hover:opacity-100"
           onClick={onRemoveSignedFieldClick}
         >
           Remove

packages/ui/primitives/document-flow/single-player-mode-fields.tsx

@@ -110,7 +110,7 @@ export function SinglePlayerModeSignatureField({
       ) : (
         <button
           onClick={() => onClick?.()}
-          className="group-hover:text-primary text-muted-foreground absolute inset-0 duration-200"
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full duration-200"
         >
           Signature
         </button>
@@ -166,7 +166,7 @@ export function SinglePlayerModeCustomTextField({
       ) : (
         <button
           onClick={() => onClick?.()}
-          className="group-hover:text-primary text-muted-foreground absolute inset-0 text-lg duration-200"
+          className="group-hover:text-primary text-muted-foreground absolute inset-0 h-full w-full text-lg duration-200"
         >
           {match(field.type)
             .with(FieldType.DATE, () => 'Date')