feat: support smaller field bounds (#1344)

Currently this won't always display super well since our insertion solution isn't amazing but our current minimum bounds within the UI are a bit large and can be smaller. This change makes it smaller and uses container queries to support dynamically displaying labels based on the container size.
2025-11-13 08:13:56 +10:00 · 2024-09-17 00:29:42 +10:00
parent fa6453e811
commit 7644c0d855
20 changed files with 75 additions and 49 deletions
--- a/packages/lib/translations/de/web.js
+++ b/packages/lib/translations/de/web.js
--- a/packages/lib/translations/de/web.po
+++ b/packages/lib/translations/de/web.po
@ -251,8 +251,8 @@ msgid "Add more"
 msgstr ""

 #: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
-msgid "Add number"
-msgstr ""
+#~ msgid "Add number"
+#~ msgstr "Nummer hinzufügen"

 #: apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx:146
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx:154
@ -276,12 +276,12 @@ msgid "Add team email"
 msgstr ""

 #: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-msgid "Add text"
-msgstr ""
+#~ msgid "Add text"
+#~ msgstr "Text hinzufügen"

 #: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
-msgid "Add Text"
-msgstr ""
+#~ msgid "Add Text"
+#~ msgstr "Text hinzufügen"

 #: apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx:152
 msgid "Add the people who will sign the document."
@ -2078,6 +2078,10 @@ msgstr ""
 msgid "Nothing to do"
 msgstr ""

+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+msgid "Number"
+msgstr ""
+
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:128
 msgid "On this page, you can create a new webhook."
 msgstr ""
@ -2598,7 +2602,7 @@ msgstr ""
 msgid "Security activity"
 msgstr ""

-#: apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx:192
+#: apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx:194
 msgid "Select"
 msgstr ""

@ -3114,6 +3118,11 @@ msgstr ""
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr ""

+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+msgid "Text"
+msgstr ""
+
 #: apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx:166
 msgid "Text Color"
 msgstr ""
--- a/packages/lib/translations/en/web.js
+++ b/packages/lib/translations/en/web.js
--- a/packages/lib/translations/en/web.po
+++ b/packages/lib/translations/en/web.po
@ -246,8 +246,8 @@ msgid "Add more"
 msgstr "Add more"

 #: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
-msgid "Add number"
-msgstr "Add number"
+#~ msgid "Add number"
+#~ msgstr "Add number"

 #: apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx:146
 #: apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx:154
@ -271,12 +271,12 @@ msgid "Add team email"
 msgstr "Add team email"

 #: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
-msgid "Add text"
-msgstr "Add text"
+#~ msgid "Add text"
+#~ msgstr "Add text"

 #: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
-msgid "Add Text"
-msgstr "Add Text"
+#~ msgid "Add Text"
+#~ msgstr "Add Text"

 #: apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx:152
 msgid "Add the people who will sign the document."
@ -2096,6 +2096,10 @@ msgstr "Not supported"
 msgid "Nothing to do"
 msgstr "Nothing to do"

+#: apps/web/src/app/(signing)/sign/[token]/number-field.tsx:270
+msgid "Number"
+msgstr "Number"
+
 #: apps/web/src/components/(dashboard)/settings/webhooks/create-webhook-dialog.tsx:128
 msgid "On this page, you can create a new webhook."
 msgstr "On this page, you can create a new webhook."
@ -2616,7 +2620,7 @@ msgstr "Security"
 msgid "Security activity"
 msgstr "Security activity"

-#: apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx:192
+#: apps/web/src/app/(signing)/sign/[token]/dropdown-field.tsx:194
 msgid "Select"
 msgstr "Select"

@ -3136,6 +3140,11 @@ msgstr "Templates"
 msgid "Templates allow you to quickly generate documents with pre-filled recipients and fields."
 msgstr "Templates allow you to quickly generate documents with pre-filled recipients and fields."

+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:256
+#: apps/web/src/app/(signing)/sign/[token]/text-field.tsx:272
+msgid "Text"
+msgstr "Text"
+
 #: apps/web/src/app/(dashboard)/admin/site-settings/banner-form.tsx:166
 msgid "Text Color"
 msgstr "Text Color"
--- a/packages/ui/primitives/document-flow/add-fields.tsx
+++ b/packages/ui/primitives/document-flow/add-fields.tsx
@ -64,8 +64,8 @@ const fontCaveat = Caveat({
  variable: '--font-caveat',
 });

-const MIN_HEIGHT_PX = 40;
-const MIN_WIDTH_PX = 140;
+const MIN_HEIGHT_PX = 20;
+const MIN_WIDTH_PX = 80;

 export type FieldFormType = {
  nativeId?: number;
--- a/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/checkbox.tsx
@ -26,19 +26,21 @@ export const CheckboxField = ({ field }: CheckboxFieldProps) => {
  }

  return (
-    <div className="flex flex-col gap-y-2">
+    <div className="flex flex-col gap-y-1">
      {!parsedFieldMeta?.values ? (
        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
      ) : (
        parsedFieldMeta.values.map((item: { value: string; checked: boolean }, index: number) => (
          <div key={index} className="flex items-center gap-x-1.5">
            <Checkbox
-              className="h-4 w-4"
+              className="h-3 w-3"
              checkClassName="text-white"
              id={`checkbox-${index}`}
              checked={item.checked}
            />
-            <Label htmlFor={`checkbox-${index}`}>{item.value}</Label>
+            <Label htmlFor={`checkbox-${index}`} className="text-xs">
+              {item.value}
+            </Label>
          </div>
        ))
      )}
--- a/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
+++ b/packages/ui/primitives/document-flow/advanced-fields/radio.tsx
@ -30,16 +30,18 @@ export const RadioField = ({ field }: RadioFieldProps) => {
      {!parsedFieldMeta?.values ? (
        <FieldIcon fieldMeta={field.fieldMeta} type={field.type} signerEmail={field.signerEmail} />
      ) : (
-        <RadioGroup>
+        <RadioGroup className="gap-y-1">
          {parsedFieldMeta.values?.map((item, index) => (
            <div key={index} className="flex items-center gap-x-1.5">
              <RadioGroupItem
-                className="pointer-events-none"
+                className="pointer-events-none h-3 w-3"
                value={item.value}
                id={`option-${index}`}
                checked={item.checked}
              />
-              <Label htmlFor={`option-${index}`}>{item.value}</Label>
+              <Label htmlFor={`option-${index}`} className="text-xs">
+                {item.value}
+              </Label>
            </div>
          ))}
        </RadioGroup>
--- a/packages/ui/primitives/document-flow/field-icon.tsx
+++ b/packages/ui/primitives/document-flow/field-icon.tsx
@ -28,8 +28,8 @@ const fieldIcons = {
  [FieldType.EMAIL]: { icon: Mail, label: 'Email' },
  [FieldType.NAME]: { icon: User, label: 'Name' },
  [FieldType.DATE]: { icon: CalendarDays, label: 'Date' },
-  [FieldType.TEXT]: { icon: Type, label: 'Add text' },
-  [FieldType.NUMBER]: { icon: Hash, label: 'Add number' },
+  [FieldType.TEXT]: { icon: Type, label: 'Text' },
+  [FieldType.NUMBER]: { icon: Hash, label: 'Number' },
  [FieldType.RADIO]: { icon: Disc, label: 'Radio' },
  [FieldType.CHECKBOX]: { icon: CheckSquare, label: 'Checkbox' },
  [FieldType.DROPDOWN]: { icon: ChevronDown, label: 'Select' },
@ -45,7 +45,7 @@ export const FieldIcon = ({
    return (
      <div
        className={cn(
-          'text-field-card-foreground flex items-center justify-center gap-x-1 text-xl',
+          'text-field-card-foreground flex items-center justify-center gap-x-1 text-[clamp(0.875rem,1.8cqw,1.2rem)]',
          fontCaveatClassName,
        )}
      >
@ -71,7 +71,7 @@ export const FieldIcon = ({
    }

    return (
-      <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-sm">
+      <div className="text-field-card-foreground flex items-center justify-center gap-x-1.5 text-[clamp(0.625rem,1cqw,0.825rem)]">
        <Icon className="h-4 w-4" /> {label}
      </div>
    );
--- a/packages/ui/primitives/document-flow/field-item.tsx
+++ b/packages/ui/primitives/document-flow/field-item.tsx
@ -201,6 +201,7 @@ export const FieldItem = ({
      <div
        className={cn(
          'relative flex h-full w-full items-center justify-center bg-white',
+          !fixedSize && '[container-type:size]',
          signerStyles.default.base,
          signerStyles.default.fieldItem,
        )}
@ -223,10 +224,10 @@ export const FieldItem = ({
          ))}

        {!hideRecipients && (
-          <div className="absolute -right-6 top-0 z-20 hidden h-full w-6 items-center justify-center group-hover:flex">
+          <div className="absolute -right-5 top-0 z-20 hidden h-full w-5 items-center justify-center group-hover:flex">
            <div
              className={cn(
-                'flex h-7 w-6 flex-col items-center justify-center rounded-r-lg text-[0.625rem] font-bold text-white',
+                'flex h-5 w-5 flex-col items-center justify-center rounded-r-md text-[0.5rem] font-bold text-white',
                signerStyles.default.fieldItemInitials,
                {
                  '!opacity-50': disabled || passive,
--- a/packages/ui/primitives/template-flow/add-template-fields.tsx
+++ b/packages/ui/primitives/template-flow/add-template-fields.tsx
@ -65,8 +65,8 @@ const fontCaveat = Caveat({
  variable: '--font-caveat',
 });

-const MIN_HEIGHT_PX = 40;
-const MIN_WIDTH_PX = 140;
+const MIN_HEIGHT_PX = 20;
+const MIN_WIDTH_PX = 80;

 export type AddTemplateFieldsFormProps = {
  documentFlow: DocumentFlowStep;