fix: improve field sizing (#1486)

## Description

Allows for smaller field sizing in addition to improving our styling
when displaying labels on smaller fields.

This is the minimum currently supported field size until we perform a
more extensive refactor of our current drag and drop system.

## Related Issue

Reported via support channels

## Changes Made

- Updated our minimum size constraints
- Attempted to add a general autosizing component for text and failed
- Updated styling in a bunch of places to use the css `clamp()` method
for dynamic sizing.

packages/ui/primitives/document-flow/show-field-item.tsx

@@ -44,18 +44,18 @@ export const ShowFieldItem = ({ field, recipients }: ShowFieldItemProps) => {
         width: `${coords.width}px`,
       }}
     >
-      <Card className={cn('bg-background h-full w-full')}>
+      <Card className={cn('bg-background h-full w-full [container-type:size]')}>
         <CardContent
           className={cn(
-            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-2 text-xl',
+            'text-muted-foreground/50 flex h-full w-full flex-col items-center justify-center p-0 text-[clamp(0.575rem,1.8cqw,1.2rem)] leading-none',
             field.type === FieldType.SIGNATURE && fontCaveat.className,
           )}
         >
           {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
 
-          <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
+          {/* <p className="text-muted-foreground/50 w-full truncate text-center text-xs">
             {signerEmail}
-          </p>
+          </p> */}
         </CardContent>
       </Card>
     </div>,