fix(ContractNumberField): clean up compact inline layout
- Hide 'Номер заказчика' label in compact mode (only switch shown) - Shrink switch to scale-75 in compact mode - Shorten placeholders: 'Юрлицо' / 'Шифр' - Reduce min-widths: select 180px, input 160px, preview 180px - Use gap-1.5 instead of space-x-2 in preview block - Fixes cluttered inline edit appearance next to field label
This commit is contained in:
@@ -144,26 +144,29 @@ export default function ContractNumberField({
|
||||
|
||||
return (
|
||||
<div className={cn(compact ? 'flex items-center gap-2 flex-wrap' : 'space-y-2')}>
|
||||
<div className="flex items-center space-x-3 shrink-0">
|
||||
<div className="flex items-center space-x-2 shrink-0">
|
||||
<Switch
|
||||
id={`contract-number-mode-${fieldId}`}
|
||||
checked={mode === 'mine'}
|
||||
onCheckedChange={(checked: boolean) => handleModeChange(checked ? 'mine' : 'customer')}
|
||||
disabled={disabled || isGenerated}
|
||||
className={compact ? 'scale-75' : ''}
|
||||
/>
|
||||
<Label htmlFor={`contract-number-mode-${fieldId}`} className="cursor-pointer">
|
||||
{mode === 'mine' ? 'Мой номер' : 'Номер заказчика'}
|
||||
</Label>
|
||||
{!compact && (
|
||||
<Label htmlFor={`contract-number-mode-${fieldId}`} className="cursor-pointer text-xs">
|
||||
{mode === 'mine' ? 'Мой номер' : 'Номер заказчика'}
|
||||
</Label>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={cn('flex-1 min-w-[160px]', compact ? 'max-w-[200px]' : 'w-full')}>
|
||||
<div className={cn('flex-1', compact ? 'min-w-[120px] max-w-[180px]' : 'min-w-[160px] w-full')}>
|
||||
<Select
|
||||
value={legalEntityTaskId?.toString() || ''}
|
||||
onValueChange={handleLegalEntityChange}
|
||||
disabled={disabled || isGenerated}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Выберите юрлицо" />
|
||||
<SelectTrigger className={cn(compact && 'h-7 text-xs px-2')}>
|
||||
<SelectValue placeholder={compact ? 'Юрлицо' : 'Выберите юрлицо'} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tasksData?.tasks?.map((task) => (
|
||||
@@ -180,14 +183,14 @@ export default function ContractNumberField({
|
||||
type="text"
|
||||
value={customerValue}
|
||||
onChange={(e) => handleCustomerChange(e.target.value)}
|
||||
placeholder="Введите шифр заказчика"
|
||||
placeholder={compact ? 'Шифр' : 'Введите шифр заказчика'}
|
||||
disabled={disabled}
|
||||
className={cn('flex-1 min-w-[160px]', compact && 'h-7 leading-6 px-2 max-w-[220px]')}
|
||||
className={cn('flex-1', compact ? 'h-7 text-xs px-2 min-w-[80px] max-w-[160px]' : 'min-w-[160px]')}
|
||||
/>
|
||||
) : (
|
||||
<div className={cn('relative flex-1 min-w-[160px]', compact && 'max-w-[220px]')}>
|
||||
<div className={cn('relative flex-1', compact ? 'min-w-[100px] max-w-[180px]' : 'min-w-[160px]')}>
|
||||
<div className={cn(
|
||||
'flex items-center space-x-2 rounded-md border border-input bg-muted/30',
|
||||
'flex items-center gap-1.5 rounded-md border border-input bg-muted/30',
|
||||
compact ? 'px-2 h-7' : 'px-3 py-2'
|
||||
)}>
|
||||
<FileSignature className="h-4 w-4 text-muted-foreground shrink-0" />
|
||||
|
||||
Reference in New Issue
Block a user