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

@ -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,