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.

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

@@ -178,7 +178,7 @@ export const DropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200 ">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
@@ -190,7 +190,7 @@ export const DropdownField = ({
                 )}
               >
                 <SelectValue
-                  className="text-[clamp(0.625rem,1cqw,0.825rem)]"
+                  className="text-[clamp(0.425rem,25cqw,0.825rem)]"
                   placeholder={`${_(msg`Select`)}`}
                 />
               </SelectTrigger>
@@ -206,7 +206,7 @@ export const DropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
+          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}