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.
This commit is contained in:
Lucas Smith
2024-09-17 00:29:42 +10:00
committed by GitHub
parent fa6453e811
commit 7644c0d855
20 changed files with 75 additions and 49 deletions

View File

@ -189,7 +189,10 @@ export const DropdownField = ({
},
)}
>
<SelectValue placeholder={`${_(msg`Select`)}`} />
<SelectValue
className="text-[clamp(0.625rem,1cqw,0.825rem)]"
placeholder={`${_(msg`Select`)}`}
/>
</SelectTrigger>
<SelectContent className="w-full ring-0 focus:ring-0" position="popper">
{parsedFieldMeta?.values?.map((item, index) => (
@ -203,7 +206,7 @@ export const DropdownField = ({
)}
{field.inserted && (
<p className="text-muted-foreground dark:text-background/80 flex items-center justify-center gap-x-1 duration-200">
<p className="text-muted-foreground dark:text-background/80 text-[clamp(0.625rem,1cqw,0.825rem)] duration-200">
{field.customText}
</p>
)}