From 787cea9db172b3f111c357129af45183ce461efa Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 11 May 2026 15:49:27 +0300
Subject: [PATCH] fix(table+layout): TableHead alias to THEAD wrapper + kill
 horizontal scroll
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CRITICAL bugs reported by user — table выглядела кривой, контент уезжал
за экран с горизонтальным скроллом.

Bug 1 — invalid HTML в Table:
  Callsites используют <TableHead><TableRow><TableHeaderCell>... ожидая
  нstart-style THEAD wrapper. Но мой alias делал TableHead = TableHeaderCell
  (TH cell). Получалось <th><tr><th>...</th></tr></th> — invalid nested,
  browser parser hoist'ил TableRow наружу, создавая phantom 509px column
  слева от данных. Колонки выглядели misaligned, content смещён вправо.

  Fix: TableHead → THEAD wrapper (alias TableHeader). TableHeaderCell
  остаётся отдельным TH cell. Source semantically correct, browser parses
  валидно, phantom column исчез.

Bug 2 — horizontal overflow:
  Scope strip border на верху detail-страницы использовал
  '-mt-6 -mx-4 sm:-mx-6 lg:-mx-8'. На lg viewport main padding только
  sm:px-6 (24px), strip negative margins -mx-8 (32px) → 8px overflow each
  side → body.scrollWidth > viewport → horizontal scrollbar.

  Fix:
  - Strip negative margins только до -mx-6 (соответствует main padding)
  - main получил overflow-x-clip + max-w-7xl wrapper получил min-w-0
    (защита от любых future overflow children)

Verified в preview viewport 1440 + 375: body.scrollWidth === viewport,
no h-scroll.
---
 ordinis-admin-ui/src/routes/__root.tsx             | 4 ++--
 ordinis-admin-ui/src/routes/dictionaries.$name.tsx | 2 +-
 ordinis-admin-ui/src/ui/components/table.tsx       | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ordinis-admin-ui/src/routes/__root.tsx b/ordinis-admin-ui/src/routes/__root.tsx
index 2ea4b6a..0ad56c6 100644
--- a/ordinis-admin-ui/src/routes/__root.tsx
+++ b/ordinis-admin-ui/src/routes/__root.tsx
@@ -36,8 +36,8 @@ function RootLayout() {
         <MobileSidebar open={mobileNavOpen} onClose={() => setMobileNavOpen(false)} />
         <div className="flex-1 flex flex-col min-w-0">
           <TopBar onMenuClick={() => setMobileNavOpen(true)} />
-          <main className="flex-1 overflow-y-auto px-4 sm:px-6 py-4 sm:py-6">
-            <div className="max-w-7xl mx-auto w-full">
+          <main className="flex-1 overflow-y-auto overflow-x-clip px-4 sm:px-6 py-4 sm:py-6">
+            <div className="max-w-7xl mx-auto w-full min-w-0">
               <Outlet />
             </div>
           </main>
diff --git a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
index 784e9c5..1a1f1de 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
@@ -498,7 +498,7 @@ function DictionaryDetail() {
     <div className="space-y-6">
       {scope && (
         <div
-          className={`-mt-6 -mx-4 sm:-mx-6 lg:-mx-8 mb-2 h-1 border-t-4 ${SCOPE_BORDER_TOP[scope]}`}
+          className={`-mt-4 sm:-mt-6 -mx-4 sm:-mx-6 mb-2 h-1 border-t-4 ${SCOPE_BORDER_TOP[scope]}`}
           aria-hidden="true"
         />
       )}
diff --git a/ordinis-admin-ui/src/ui/components/table.tsx b/ordinis-admin-ui/src/ui/components/table.tsx
index e64bd1c..d597926 100644
--- a/ordinis-admin-ui/src/ui/components/table.tsx
+++ b/ordinis-admin-ui/src/ui/components/table.tsx
@@ -37,6 +37,11 @@ export const TableHeader = React.forwardRef<
     />
   )
 })
+// nstart-compat alias: nstart использовал <TableHead> как THEAD wrapper.
+// shadcn по convention использует TableHead как TH cell — это конфликтовало
+// (callsites писали `<TableHead><TableRow>...` ожидая THEAD-семантику).
+// Резолвим в пользу nstart-compat (callsites больше). Для TH cell — TableHeaderCell.
+export const TableHead = TableHeader
 
 export const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -104,8 +109,6 @@ export const TableHeaderCell = React.forwardRef<HTMLTableCellElement, TableHeade
     )
   },
 )
-// Alias for shadcn convention.
-export const TableHead = TableHeaderCell
 
 export const TableCell = React.forwardRef<
   HTMLTableCellElement,