From b2231a5a47b39443f2e3a9a49fb3ec9eb7dd4399 Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 11 May 2026 23:43:38 +0300
Subject: [PATCH] =?UTF-8?q?fix(form):=20FK=20select=20label=20overflow=20?=
 =?UTF-8?q?=E2=80=94=20truncate=20+=20ellipsis=20(=D0=BD=D0=B0=D0=B5=D0=B7?=
 =?UTF-8?q?=D0=B6=D0=B0=D1=8E=D1=82=20on=20chevron)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Native <select> для FK references показывал label '<code> — <localized name>'
(например 'OPT_MIDRES_MS — Оптический мульти-резолюционный мульти-спектральный')
— текст бьётся на chevron в trigger area из-за тонкого contract'а browser-
specific overflow handling (наезжают per user screenshot 2026-05-11).

Fix:
- buildOption() обрезает name до MAX_FK_LABEL_CHARS=28 (code intact) +
  '…' suffix когда combined превышает limit
- select сам получает 'truncate overflow-hidden whitespace-nowrap text-ellipsis'
  как защита если browser native truncate не сработал
- pr-10 → pr-9 (38px) — точно совпадает с right-3 chevron position (12px)
  + ~16px icon + 8px gap, не overlap'aет.
---
 .../src/components/form/SchemaDrivenForm.tsx  | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
index e2905cf..7df62c7 100644
--- a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
+++ b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
@@ -966,9 +966,13 @@ const ReferenceSelectField = ({
               aria-invalid={Boolean(errorMsg)}
               aria-busy={isLoading}
               // appearance-none убирает OS default стрелку.
-              // py-2 (8px) match'ит TextInput высоту. pr-10 — место под адорнмент.
+              // pr-9 — место под custom адорнмент (chevron at right-3 + 12px).
+              // truncate/text-ellipsis форсят ellipsis на длинных option labels
+              // (предотвращает 'наезд' текста на chevron, см. buildOption — там
+              // ещё дополнительный length cap чтобы native select не overflowed).
               className={[
-                'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-body font-display',
+                'w-full appearance-none border rounded-sm pl-3 pr-9 py-2 text-body font-display',
+                'truncate overflow-hidden whitespace-nowrap text-ellipsis',
                 'bg-white text-black transition-colors',
                 'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
                 errorMsg ? 'border-mars' : 'border-line hover:border-ink/40',
@@ -1003,10 +1007,14 @@ const ReferenceSelectField = ({
 
 /**
  * Build a SelectOption from a record. Uses `record.data[refField]` as the
- * option id (the FK value). Label combines id with a localized name field
- * when available — `OPERATIONAL — Действующий` is much friendlier than
- * just `OPERATIONAL`.
+ * option id (the FK value). Label combines id с локализованным name'ом —
+ * `OPERATIONAL — Действующий` понятнее чем чистый `OPERATIONAL`. Если
+ * комбинация длиннее MAX_LABEL chars, name truncate'ится с ellipsis —
+ * иначе native `<select>` trigger перекрывается chevron'ом (см. screenshot
+ * 2026-05-11 'наезжают'). Полный display name остаётся в hint поля.
  */
+const MAX_FK_LABEL_CHARS = 28
+
 const buildOption = (
   record: FlattenedRecord,
   refField: string | undefined,
@@ -1018,8 +1026,14 @@ const buildOption = (
 
   const nameField = record.data?.['name']
   const display = pickLocalized(nameField, defaultLocale)
-  const label = display ? `${idStr} — ${display}` : idStr
-  return { id: idStr, label }
+  if (!display) return { id: idStr, label: idStr }
+
+  const combined = `${idStr} — ${display}`
+  if (combined.length <= MAX_FK_LABEL_CHARS) return { id: idStr, label: combined }
+  // Truncate display, keep code intact (код — primary identifier).
+  const allowedDisplayLen = Math.max(4, MAX_FK_LABEL_CHARS - idStr.length - 4) // ' — ' + '…'
+  const truncated = `${display.slice(0, allowedDisplayLen).trimEnd()}…`
+  return { id: idStr, label: `${idStr} — ${truncated}` }
 }
 
 const countErrorsPerTab = (