fix(ui): prevent autofocus on hover card open

apps/docs/content/docs/policies/enterprise-edition.mdx

@@ -76,8 +76,6 @@ The Enterprise Edition is required when you:
     4. Restart your Documenso instance
     5. Verify the license is active in the **Admin Panel** under the **Stats** section
 
-    See [Apply Your License Key](/docs/self-hosting/configuration/license) for the full walkthrough, including how to enable individual features once licensed.
-
   </Accordion>
 </Accordions>
 
@@ -199,7 +197,7 @@ See [Support](/docs/policies/support) for complete support options.
     1. Sign the Enterprise license agreement
     2. Receive license key and access credentials
     3. Deploy using [self-hosting guides](/docs/self-hosting) or access Documenso Cloud
-    4. Apply the key — see [Apply Your License Key](/docs/self-hosting/configuration/license) — and configure Enterprise features with support assistance
+    4. Configure Enterprise features with support assistance
 
   </Step>
   <Step>
@@ -240,7 +238,6 @@ See [Support](/docs/policies/support) for complete support options.
 
 ## Related
 
-- [Apply Your License Key](/docs/self-hosting/configuration/license) - Step-by-step license activation
 - [Community Edition](/docs/policies/community-edition) - AGPL-3.0 open-source license
 - [Licenses](/docs/policies/licenses) - Complete licensing overview and FAQ
 - [Support](/docs/policies/support) - Support channels and response times

apps/docs/content/docs/self-hosting/configuration/environment.mdx

@@ -443,11 +443,11 @@ Telemetry collects only: app version, installation ID, and node ID. No personal
 
 ## Enterprise Features
 
-These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance. See [Apply Your License Key](/docs/self-hosting/configuration/license) for step-by-step setup.
+These variables require an active [Enterprise Edition](/docs/policies/enterprise-edition) license. Obtain a license key from [license.documenso.com](https://license.documenso.com) and set it below to unlock enterprise features such as SSO, embed editor, and 21 CFR Part 11 compliance.
 
 | Variable                             | Description                                      |
 | ------------------------------------ | ------------------------------------------------ |
-| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features — see [Apply Your License Key](/docs/self-hosting/configuration/license) for how to apply it |
+| `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` | License key for enterprise features              |
 | `NEXT_PRIVATE_STRIPE_API_KEY`        | Stripe API key for billing                       |
 | `NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET` | Stripe webhook secret                            |
 | `NEXT_PRIVATE_SES_ACCESS_KEY_ID`     | AWS SES access key for email domain verification |

apps/docs/content/docs/self-hosting/configuration/license.mdx

@@ -1,107 +0,0 @@
----
-title: Apply Your License Key
-description: Activate your Enterprise license key to unlock enterprise features on your self-hosted instance.
----
-
-import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
-import { Callout } from 'fumadocs-ui/components/callout';
-import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
-
-A license key activates the Enterprise features available to your self-hosted instance, such as CSC signing, SSO, embed white-labelling, and 21 CFR Part 11 compliance.
-
-<Callout type="info">
-  The license key applies to your **whole instance**, not an individual user account. There's one
-  key per deployment.
-</Callout>
-
-## Prerequisites
-
-- An active Enterprise license key — contact [sales](https://documen.so/enterprise) to set up an
-  Enterprise subscription, then copy your key from [license.documenso.com](https://license.documenso.com).
-  See [Enterprise Edition](/docs/policies/enterprise-edition) for details.
-- A running self-hosted Documenso instance that you're able to restart
-
-## Step 1: Set the environment variable
-
-Set `NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY` to your license key.
-
-<Tabs items={['Docker Compose', 'docker run', '.env']}>
-<Tab value="Docker Compose">
-
-Add the variable to your `.env` file (or directly under `environment:` in `compose.yml`):
-
-```bash
-NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
-```
-
-Then apply it:
-
-```bash
-docker compose up -d
-```
-
-</Tab>
-<Tab value="docker run">
-
-```bash
-docker run -d \
-  --name documenso \
-  -e NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here \
-  documenso/documenso:latest
-```
-
-</Tab>
-<Tab value=".env">
-
-If you're running Documenso directly (not in a container), add the variable to your `.env` file:
-
-```bash
-NEXT_PRIVATE_DOCUMENSO_LICENSE_KEY=your-license-key-here
-```
-
-</Tab>
-</Tabs>
-
-## Step 2: Restart the instance
-
-The license key is only read once, at process startup. Setting the variable in a running container or shell has no effect until the process restarts.
-
-```bash
-# Docker Compose
-docker compose restart documenso
-
-# Docker
-docker restart documenso
-```
-
-On startup, Documenso validates the key against the Documenso license server and caches the result locally for future startups, so a brief license-server outage won't lock you out.
-
-## What the license enables
-
-A valid license doesn't turn every enterprise feature on everywhere — activation depends on the feature:
-
-- **CSC signing** activates instance-wide automatically once the license is active and CSC transport is configured. See [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) for the full setup.
-- **SSO, embed white-labelling, 21 CFR Part 11, and similar** are provisioned per organisation. Follow each feature's own guide to configure it once the license is active.
-
-## Troubleshooting
-
-<Accordions type="multiple">
-  <Accordion title="Enterprise features are still unavailable after applying the key">
-    - Confirm the key is present in the environment the running process actually reads — `docker
-      exec` into the container and check `env | grep LICENSE` if unsure.
-    - Confirm the instance was fully restarted after the variable was set, not just reloaded.
-    - Re-copy the key to rule out truncation or accidental whitespace.
-  </Accordion>
-  <Accordion title="A specific feature still isn't working">
-    Instance-wide features (like CSC signing) also need their own configuration — an active license
-    alone isn't enough. Check that feature's guide to confirm the required settings are in place.
-    Per-organisation features additionally need to be provisioned for the organisation that's using
-    them.
-  </Accordion>
-</Accordions>
-
-## See Also
-
-- [Environment Variables](/docs/self-hosting/configuration/environment) - Complete configuration reference
-- [Enterprise Edition](/docs/policies/enterprise-edition) - What's included and how to purchase a license
-- [CSC / QES Signing](/docs/self-hosting/configuration/signing-certificate/csc-qes) - Enable CSC-based signing

apps/docs/content/docs/self-hosting/configuration/meta.json

@@ -2,7 +2,6 @@
   "title": "Configuration",
   "pages": [
     "environment",
-    "license",
     "database",
     "email",
     "storage",

apps/docs/content/docs/self-hosting/configuration/signing-certificate/csc-qes.mdx

@@ -49,7 +49,7 @@ The callback URL is fixed — Documenso derives it from `NEXT_PUBLIC_WEBAPP_URL`
 
 ### Enterprise Edition license
 
-CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`). See [Apply Your License Key](/docs/self-hosting/configuration/license) to activate one.
+CSC mode is gated by the `instanceCscSigning` license flag. Without a valid Enterprise license, the transport refuses to start (`CSC_UNLICENSED`).
 
 </Step>
 <Step>

apps/docs/content/docs/self-hosting/index.mdx

@@ -141,7 +141,7 @@ See the [Quick Start guide](/docs/self-hosting/getting-started/quick-start) for
 
 Self-hosted Documenso includes full core functionality under the AGPL-3.0 license. If you need enterprise features such as SSO, embed editor white label, or 21 CFR Part 11 compliance, you can activate them with a license key.
 
-See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison. Already have a key? See [Apply Your License Key](/docs/self-hosting/configuration/license).
+See [Enterprise Edition](/docs/policies/enterprise-edition) for details and [Licenses](/docs/policies/licenses) for a comparison.
 
 ---
 

apps/remix/app/components/dialogs/template-use-dialog-document-name.tsx

@@ -1,197 +0,0 @@
-import { DOCUMENT_TITLE_MAX_LENGTH } from '@documenso/trpc/server/document-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
-import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@documenso/ui/primitives/form/form';
-import { Input } from '@documenso/ui/primitives/input';
-import { RadioGroup, RadioGroupItem } from '@documenso/ui/primitives/radio-group';
-import { msg } from '@lingui/core/macro';
-import { Trans, useLingui } from '@lingui/react/macro';
-import { useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { z } from 'zod';
-
-export const DOCUMENT_NAME_SOURCE = {
-  TEMPLATE: 'template',
-  UPLOAD: 'upload',
-  CUSTOM: 'custom',
-} as const;
-
-type TDocumentNameSource = (typeof DOCUMENT_NAME_SOURCE)[keyof typeof DOCUMENT_NAME_SOURCE];
-
-type TTemplateUseCustomDocumentData = {
-  data?: File;
-};
-
-type TTemplateUseDocumentNameData = {
-  documentNameSource: TDocumentNameSource;
-  customDocumentName: string;
-  customDocumentData?: TTemplateUseCustomDocumentData[];
-};
-
-type TTemplateUseDocumentNameFormValues = TTemplateUseDocumentNameData & {
-  useCustomDocument: boolean;
-};
-
-const getUploadedDocumentTitle = (customDocumentData?: TTemplateUseCustomDocumentData[]) => {
-  const uploadedFiles = customDocumentData?.map((item) => item.data).filter((file): file is File => file !== undefined);
-
-  if (uploadedFiles?.length !== 1) {
-    return undefined;
-  }
-
-  return uploadedFiles[0].name.replace(/\.[^/.]+$/, '').trim();
-};
-
-export const getTemplateUseDocumentTitle = (data: TTemplateUseDocumentNameData) => {
-  if (data.documentNameSource === DOCUMENT_NAME_SOURCE.UPLOAD) {
-    return getUploadedDocumentTitle(data.customDocumentData);
-  }
-
-  if (data.documentNameSource === DOCUMENT_NAME_SOURCE.CUSTOM) {
-    return data.customDocumentName.trim();
-  }
-
-  return undefined;
-};
-
-export const refineTemplateUseDocumentName = (data: TTemplateUseDocumentNameData, ctx: z.RefinementCtx) => {
-  if (data.documentNameSource === DOCUMENT_NAME_SOURCE.TEMPLATE) {
-    return;
-  }
-
-  const title = getTemplateUseDocumentTitle(data);
-  const path = data.documentNameSource === DOCUMENT_NAME_SOURCE.CUSTOM ? 'customDocumentName' : 'documentNameSource';
-
-  if (!title) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message:
-        data.documentNameSource === DOCUMENT_NAME_SOURCE.CUSTOM
-          ? msg`Document name is required`.id
-          : msg`Select exactly one uploaded document to use its file name.`.id,
-      path: [path],
-    });
-
-    return;
-  }
-
-  if (title.length > DOCUMENT_TITLE_MAX_LENGTH) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: msg`Document name is too long`.id,
-      path: [path],
-    });
-  }
-};
-
-export const TemplateUseDialogDocumentName = () => {
-  const { t } = useLingui();
-  const { clearErrors, control, setValue } = useFormContext<TTemplateUseDocumentNameFormValues>();
-  const [useCustomDocument, documentNameSource, customDocumentData] = useWatch({
-    control,
-    name: ['useCustomDocument', 'documentNameSource', 'customDocumentData'],
-  });
-
-  const uploadedDocumentCount = customDocumentData?.filter((item) => item.data !== undefined).length ?? 0;
-  const canUseUploadedDocumentName = useCustomDocument && uploadedDocumentCount === 1;
-
-  useEffect(() => {
-    if (documentNameSource !== DOCUMENT_NAME_SOURCE.UPLOAD || canUseUploadedDocumentName) {
-      return;
-    }
-
-    setValue('documentNameSource', DOCUMENT_NAME_SOURCE.TEMPLATE);
-    clearErrors('documentNameSource');
-  }, [canUseUploadedDocumentName, clearErrors, documentNameSource, setValue]);
-
-  return (
-    <>
-      <FormField
-        control={control}
-        name="documentNameSource"
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel>
-              <Trans>Document name</Trans>
-            </FormLabel>
-            <FormControl>
-              <RadioGroup
-                aria-label={t`Document name`}
-                value={field.value}
-                onValueChange={(value) => {
-                  field.onChange(value);
-
-                  if (value !== DOCUMENT_NAME_SOURCE.CUSTOM) {
-                    clearErrors('customDocumentName');
-                  }
-
-                  if (value !== DOCUMENT_NAME_SOURCE.UPLOAD) {
-                    clearErrors('documentNameSource');
-                  }
-                }}
-                className="space-y-2"
-              >
-                <div className="flex items-center gap-2">
-                  <RadioGroupItem id="document-name-source-template" value={DOCUMENT_NAME_SOURCE.TEMPLATE} />
-                  <label className="text-sm" htmlFor="document-name-source-template">
-                    <Trans>Use template name</Trans>
-                  </label>
-                </div>
-
-                <div className="flex items-start gap-2">
-                  <RadioGroupItem
-                    id="document-name-source-upload"
-                    value={DOCUMENT_NAME_SOURCE.UPLOAD}
-                    disabled={!canUseUploadedDocumentName}
-                    className="mt-0.5"
-                  />
-                  <div>
-                    <label
-                      className={cn('text-sm', {
-                        'cursor-not-allowed text-muted-foreground': !canUseUploadedDocumentName,
-                      })}
-                      htmlFor="document-name-source-upload"
-                    >
-                      <Trans>Use uploaded file name</Trans>
-                    </label>
-
-                    {!canUseUploadedDocumentName && (
-                      <p className="text-muted-foreground text-xs">
-                        <Trans>Select exactly one uploaded document to use its file name.</Trans>
-                      </p>
-                    )}
-                  </div>
-                </div>
-
-                <div className="flex items-center gap-2">
-                  <RadioGroupItem id="document-name-source-custom" value={DOCUMENT_NAME_SOURCE.CUSTOM} />
-                  <label className="text-sm" htmlFor="document-name-source-custom">
-                    <Trans>Enter custom document name</Trans>
-                  </label>
-                </div>
-              </RadioGroup>
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
-
-      {documentNameSource === DOCUMENT_NAME_SOURCE.CUSTOM && (
-        <FormField
-          control={control}
-          name="customDocumentName"
-          render={({ field }) => (
-            <FormItem className="ml-6">
-              <FormLabel>
-                <Trans>Custom document name</Trans>
-              </FormLabel>
-              <FormControl>
-                <Input {...field} placeholder={t`Enter a document name`} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-      )}
-    </>
-  );
-};

apps/remix/app/components/dialogs/template-use-dialog.tsx

@@ -38,44 +38,27 @@ import { useNavigate } from 'react-router';
 import * as z from 'zod';
 import { getTemplateUseErrorMessage } from '~/utils/toast-error-messages';
 
-import {
-  DOCUMENT_NAME_SOURCE,
-  getTemplateUseDocumentTitle,
-  refineTemplateUseDocumentName,
-  TemplateUseDialogDocumentName,
-} from './template-use-dialog-document-name';
-
-const ZAddRecipientsForNewDocumentSchema = z
-  .object({
-    distributeDocument: z.boolean(),
-    useCustomDocument: z.boolean().default(false),
-    documentNameSource: z.enum([
-      DOCUMENT_NAME_SOURCE.TEMPLATE,
-      DOCUMENT_NAME_SOURCE.UPLOAD,
-      DOCUMENT_NAME_SOURCE.CUSTOM,
-    ]),
-    customDocumentName: z.string(),
-    customDocumentData: z
-      .array(
-        z.object({
-          title: z.string(),
-          data: z.instanceof(File).optional(),
-          envelopeItemId: z.string(),
-        }),
-      )
-      .optional(),
-    recipients: z.array(
+const ZAddRecipientsForNewDocumentSchema = z.object({
+  distributeDocument: z.boolean(),
+  useCustomDocument: z.boolean().default(false),
+  customDocumentData: z
+    .array(
       z.object({
-        id: z.number(),
-        email: ZRecipientEmailSchema,
-        name: z.string(),
-        signingOrder: z.number().optional(),
+        title: z.string(),
+        data: z.instanceof(File).optional(),
+        envelopeItemId: z.string(),
       }),
-    ),
-  })
-  .superRefine((data, ctx) => {
-    refineTemplateUseDocumentName(data, ctx);
-  });
+    )
+    .optional(),
+  recipients: z.array(
+    z.object({
+      id: z.number(),
+      email: ZRecipientEmailSchema,
+      name: z.string(),
+      signingOrder: z.number().optional(),
+    }),
+  ),
+});
 
 type TAddRecipientsForNewDocumentSchema = z.infer<typeof ZAddRecipientsForNewDocumentSchema>;
 
@@ -123,8 +106,6 @@ export function TemplateUseDialog({
     return {
       distributeDocument: false,
       useCustomDocument: false,
-      documentNameSource: DOCUMENT_NAME_SOURCE.TEMPLATE,
-      customDocumentName: '',
       customDocumentData: envelopeItems.map((item) => ({
         title: item.title,
         data: undefined,
@@ -161,8 +142,6 @@ export function TemplateUseDialog({
 
   const onSubmit = async (data: TAddRecipientsForNewDocumentSchema) => {
     try {
-      const documentTitle = getTemplateUseDocumentTitle(data);
-
       const customFilesToUpload = (data.customDocumentData || []).filter(
         (item): item is { data: File; envelopeItemId: string; title: string } =>
           item.data !== undefined && item.envelopeItemId !== undefined && item.title !== undefined,
@@ -184,7 +163,6 @@ export function TemplateUseDialog({
         recipients: data.recipients,
         distributeDocument: data.distributeDocument,
         customDocumentData,
-        ...(documentTitle ? { override: { title: documentTitle } } : {}),
       });
 
       toast({
@@ -217,8 +195,6 @@ export function TemplateUseDialog({
     name: 'recipients',
   });
 
-  const useCustomDocument = form.watch('useCustomDocument');
-
   useEffect(() => {
     if (open) {
       form.reset(generateDefaultFormValues());
@@ -425,16 +401,7 @@ export function TemplateUseDialog({
                           onCheckedChange={(checked) => {
                             field.onChange(checked);
                             if (!checked) {
-                              const customDocumentData = form.getValues('customDocumentData');
-
-                              form.setValue(
-                                'customDocumentData',
-                                customDocumentData?.map((item) => ({
-                                  ...item,
-                                  data: undefined,
-                                })),
-                              );
-                              form.clearErrors('customDocumentData');
+                              form.setValue('customDocumentData', undefined);
                             }
                           }}
                         />
@@ -461,7 +428,7 @@ export function TemplateUseDialog({
                   )}
                 />
 
-                {useCustomDocument && (
+                {form.watch('useCustomDocument') && (
                   <div className="my-4 space-y-2">
                     {isLoadingEnvelopeItems ? (
                       <SpinnerBox className="py-16" />
@@ -570,7 +537,6 @@ export function TemplateUseDialog({
                                         }
 
                                         field.onChange(file);
-                                        form.clearErrors('customDocumentData');
                                       }}
                                     />
                                   </div>
@@ -584,8 +550,6 @@ export function TemplateUseDialog({
                     )}
                   </div>
                 )}
-
-                <TemplateUseDialogDocumentName />
               </div>
 
               <DialogFooter className="mt-4">

apps/remix/app/components/forms/signup.tsx

@@ -96,7 +96,7 @@ export const SignUpForm = ({
       password: '',
       signature: '',
     },
-    mode: 'onChange',
+    mode: 'onBlur',
     resolver: zodResolver(ZSignUpFormSchema),
   });
 

apps/remix/package.json

@@ -36,8 +36,8 @@
     "@lingui/react": "^5.6.0",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
-    "@react-router/node": "^7.18.1",
-    "@react-router/serve": "^7.18.1",
+    "@react-router/node": "^7.12.0",
+    "@react-router/serve": "^7.12.0",
     "@simplewebauthn/browser": "^13.2.2",
     "@simplewebauthn/server": "^13.2.2",
     "@tanstack/react-query": "5.90.10",
@@ -81,8 +81,8 @@
     "@babel/preset-typescript": "^7.28.5",
     "@lingui/babel-plugin-lingui-macro": "^5.6.0",
     "@lingui/vite-plugin": "^5.6.0",
-    "@react-router/dev": "^7.18.1",
-    "@react-router/remix-routes-option-adapter": "^7.18.1",
+    "@react-router/dev": "^7.12.0",
+    "@react-router/remix-routes-option-adapter": "^7.12.0",
     "@rollup/plugin-babel": "^6.1.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-json": "^6.1.0",

packages/ui/components/document/envelope-recipient-field-tooltip.tsx

@@ -2,16 +2,27 @@ import { getBoundingClientRect } from '@documenso/lib/client-only/get-bounding-c
 import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import { Trans, useLingui } from '@lingui/react/macro';
 import type { Field, Recipient } from '@prisma/client';
-import { SigningStatus } from '@prisma/client';
-import { ClockIcon, EyeOffIcon, LockIcon } from 'lucide-react';
-import { useCallback, useEffect, useState } from 'react';
+import { FieldType, SigningStatus } from '@prisma/client';
+import {
+  CalendarDaysIcon,
+  CheckSquareIcon,
+  ChevronDownIcon,
+  ContactIcon,
+  DiscIcon,
+  EyeOffIcon,
+  HashIcon,
+  LockIcon,
+  MailIcon,
+  TypeIcon,
+  UserIcon,
+} from 'lucide-react';
+import { type ElementType, useCallback, useEffect, useState } from 'react';
 
 import { isTemplateRecipientEmailPlaceholder } from '../../../lib/constants/template';
 import { extractInitials } from '../../../lib/utils/recipient-formatter';
 import { SignatureIcon } from '../../icons/signature';
 import { cn } from '../../lib/utils';
 import { Avatar, AvatarFallback } from '../../primitives/avatar';
-import { Badge } from '../../primitives/badge';
 import { FRIENDLY_FIELD_TYPE } from '../../primitives/document-flow/types';
 import { PopoverHover } from '../../primitives/popover';
 
@@ -27,16 +38,18 @@ interface EnvelopeRecipientFieldTooltipProps {
   showRecipientColors?: boolean;
 }
 
-const getRecipientDisplayText = (recipient: { name: string; email: string }) => {
-  if (recipient.name && !isTemplateRecipientEmailPlaceholder(recipient.email)) {
-    return `${recipient.name} (${recipient.email})`;
-  }
-
-  if (recipient.name && isTemplateRecipientEmailPlaceholder(recipient.email)) {
-    return recipient.name;
-  }
-
-  return recipient.email;
+const FIELD_TYPE_ICONS: Record<FieldType, ElementType> = {
+  [FieldType.SIGNATURE]: SignatureIcon,
+  [FieldType.FREE_SIGNATURE]: SignatureIcon,
+  [FieldType.INITIALS]: ContactIcon,
+  [FieldType.TEXT]: TypeIcon,
+  [FieldType.DATE]: CalendarDaysIcon,
+  [FieldType.EMAIL]: MailIcon,
+  [FieldType.NAME]: UserIcon,
+  [FieldType.NUMBER]: HashIcon,
+  [FieldType.RADIO]: DiscIcon,
+  [FieldType.CHECKBOX]: CheckSquareIcon,
+  [FieldType.DROPDOWN]: ChevronDownIcon,
 };
 
 /**
@@ -50,6 +63,8 @@ export function EnvelopeRecipientFieldTooltip({
 }: EnvelopeRecipientFieldTooltipProps) {
   const { t } = useLingui();
 
+  const FieldIcon = FIELD_TYPE_ICONS[field.type];
+
   const [hideField, setHideField] = useState<boolean>(!showRecipientTooltip);
 
   const [coords, setCoords] = useState({
@@ -138,54 +153,64 @@ export function EnvelopeRecipientFieldTooltip({
           </Avatar>
         }
         contentProps={{
-          className: 'relative flex mb-4 w-fit flex-col p-4 text-sm',
+          className: 'flex w-64 flex-col overflow-hidden p-0 text-sm',
+          sideOffset: 20,
+          onOpenAutoFocus: (event) => event.preventDefault(),
         }}
       >
-        {showFieldStatus && (
-          <Badge
-            className="mx-auto mb-1 py-0.5"
-            variant={
-              field?.fieldMeta?.readOnly
-                ? 'neutral'
-                : field.recipient.signingStatus === SigningStatus.SIGNED
-                  ? 'default'
-                  : 'secondary'
-            }
-          >
-            {field?.fieldMeta?.readOnly ? (
-              <>
-                <LockIcon className="mr-1 h-3 w-3" />
-                <Trans>Read Only</Trans>
-              </>
-            ) : field.recipient.signingStatus === SigningStatus.SIGNED ? (
-              <>
-                <SignatureIcon className="mr-1 h-3 w-3" />
-                <Trans>Signed</Trans>
-              </>
-            ) : (
-              <>
-                <ClockIcon className="mr-1 h-3 w-3" />
-                <Trans>Pending</Trans>
-              </>
-            )}
-          </Badge>
-        )}
+        <div className="flex items-center gap-2 p-3">
+          <FieldIcon className="h-4 w-4 shrink-0 text-muted-foreground" />
 
-        <p className="text-center font-semibold">
-          <span>
+          <p className="min-w-0 flex-1 truncate font-medium">
             <Trans>{t(FRIENDLY_FIELD_TYPE[field.type])} field</Trans>
-          </span>
-        </p>
+          </p>
 
-        <p className="mt-1 text-center text-muted-foreground text-xs">{getRecipientDisplayText(field.recipient)}</p>
+          {showFieldStatus && (
+            <div className="flex shrink-0 items-center gap-1.5 text-xs">
+              {field?.fieldMeta?.readOnly ? (
+                <>
+                  <LockIcon className="h-3 w-3 text-muted-foreground" />
+                  <span className="text-muted-foreground">
+                    <Trans>Read Only</Trans>
+                  </span>
+                </>
+              ) : field.recipient.signingStatus === SigningStatus.SIGNED ? (
+                <>
+                  <span className="h-1.5 w-1.5 rounded-full bg-green-500" />
+                  <span className="text-green-600 dark:text-green-400">
+                    <Trans>Signed</Trans>
+                  </span>
+                </>
+              ) : (
+                <>
+                  <span className="h-1.5 w-1.5 rounded-full bg-amber-400" />
+                  <span className="text-amber-600 dark:text-amber-400">
+                    <Trans>Pending</Trans>
+                  </span>
+                </>
+              )}
+            </div>
+          )}
+        </div>
 
-        <button
-          className="absolute top-0 right-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
-          onClick={() => setHideField(true)}
-          title="Hide field"
-        >
-          <EyeOffIcon className="h-3 w-3" />
-        </button>
+        <div className="flex items-center gap-3 border-border/50 border-t bg-muted/50 px-3 py-2.5">
+          <div className="min-w-0 flex-1">
+            <p className="truncate font-medium text-xs">{field.recipient.name || field.recipient.email}</p>
+
+            {!isTemplateRecipientEmailPlaceholder(field.recipient.email) && field.recipient.name && (
+              <p className="truncate text-muted-foreground text-xs">{field.recipient.email}</p>
+            )}
+          </div>
+
+          <button
+            type="button"
+            className="-m-1 shrink-0 rounded-sm p-1 text-muted-foreground hover:bg-background hover:text-foreground"
+            onClick={() => setHideField(true)}
+            title={t`Hide field`}
+          >
+            <EyeOffIcon className="h-3.5 w-3.5" />
+          </button>
+        </div>
       </PopoverHover>
     </div>
   );