From d3b1869612bfd76f39242b7697e6b1fda792fe8b Mon Sep 17 00:00:00 2001
From: iisultanov <99495690+iisultanov@users.noreply.github.com>
Date: Wed, 15 Jul 2026 22:12:37 +0300
Subject: [PATCH] fix(ContractNumberField): clean up compact inline layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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
---
 client/src/components/ContractNumberField.tsx | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/client/src/components/ContractNumberField.tsx b/client/src/components/ContractNumberField.tsx
index d0c9449..37a6750 100644
--- a/client/src/components/ContractNumberField.tsx
+++ b/client/src/components/ContractNumberField.tsx
@@ -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" />