From f21c55d04a3a07f43cb9607652dfaaa447629f55 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Thu, 11 Jun 2026 18:17:56 +0700
Subject: [PATCH] [CLAUDE] PurchaseEvaluation: bang NCC tham gia table-fixed +
 width tung cot (UAT vong 3 - "them file giao dien bi thay doi khong can
 xung")

- Bang NCC trong HangMucCard dung auto-layout -> cell File (chip ten file dai) phinh,
  bop doc cot NCC tung chu. Fix: table-fixed + w-% tung cot (NCC 24 / SDT 9 / Email 14 /
  DKTT 14 / File 22 / So tien 12 / action w-10) + min-w-[860px] (panel hep -> scroll
  ngang qua wrapper overflow-x-auto thay vi bop nat) + email span block truncate.
- Chip file/email truncate san - kich hoat khi cell khoa width.
- SHA256 mirror x2 app IDENTICAL, build tsc+vite x2 PASS.
---
 fe-admin/src/components/pe/PeDetailTabs.tsx | 22 ++++++++++++---------
 fe-user/src/components/pe/PeDetailTabs.tsx  | 22 ++++++++++++---------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 892e349..3025d55 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -1774,16 +1774,20 @@ function HangMucCard({
             </p>
           ) : (
             <div className="overflow-x-auto">
-              <table className="min-w-full border border-slate-200 text-xs">
+              {/* S59 UAT vòng 3: "thêm file giao diện bị thay đổi không cân xứng" — auto-layout
+                  để cell File (chip tên dài) phình + bóp dọc cột NCC. Fix: table-fixed + width
+                  từng cột (chip file/email có truncate sẵn — kích hoạt khi cell khóa width);
+                  min-w để panel hẹp thì scroll ngang (wrapper overflow-x-auto) thay vì bóp nát. */}
+              <table className="w-full min-w-[860px] table-fixed border border-slate-200 text-xs">
                 <thead className="bg-slate-50 text-slate-600">
                   <tr>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">SĐT</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Email</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">Số tiền</th>
-                    {!readOnly && <th className="px-2 py-1.5"></th>}
+                    <th className="w-[24%] border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
+                    <th className="w-[9%] border-r border-slate-200 px-2 py-1.5 text-left">SĐT</th>
+                    <th className="w-[14%] border-r border-slate-200 px-2 py-1.5 text-left">Email</th>
+                    <th className="w-[14%] border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
+                    <th className="w-[22%] border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
+                    <th className="w-[12%] border-r border-slate-200 px-2 py-1.5 text-right">Số tiền</th>
+                    {!readOnly && <th className="w-10 px-2 py-1.5"></th>}
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-100">
@@ -1817,7 +1821,7 @@ function HangMucCard({
                         </td>
                         <td className="border-r border-slate-200 px-2 py-1.5 text-[11px] text-slate-600">
                           {s.contactEmail
-                            ? <span className="truncate" title={s.contactEmail}>{s.contactEmail}</span>
+                            ? <span className="block truncate" title={s.contactEmail}>{s.contactEmail}</span>
                             : <span className="text-slate-300">—</span>}
                         </td>
                         <td className="border-r border-slate-200 px-2 py-1.5 text-[11px]">
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index 892e349..3025d55 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -1774,16 +1774,20 @@ function HangMucCard({
             </p>
           ) : (
             <div className="overflow-x-auto">
-              <table className="min-w-full border border-slate-200 text-xs">
+              {/* S59 UAT vòng 3: "thêm file giao diện bị thay đổi không cân xứng" — auto-layout
+                  để cell File (chip tên dài) phình + bóp dọc cột NCC. Fix: table-fixed + width
+                  từng cột (chip file/email có truncate sẵn — kích hoạt khi cell khóa width);
+                  min-w để panel hẹp thì scroll ngang (wrapper overflow-x-auto) thay vì bóp nát. */}
+              <table className="w-full min-w-[860px] table-fixed border border-slate-200 text-xs">
                 <thead className="bg-slate-50 text-slate-600">
                   <tr>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">SĐT</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Email</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
-                    <th className="border-r border-slate-200 px-2 py-1.5 text-right">Số tiền</th>
-                    {!readOnly && <th className="px-2 py-1.5"></th>}
+                    <th className="w-[24%] border-r border-slate-200 px-2 py-1.5 text-left">NCC</th>
+                    <th className="w-[9%] border-r border-slate-200 px-2 py-1.5 text-left">SĐT</th>
+                    <th className="w-[14%] border-r border-slate-200 px-2 py-1.5 text-left">Email</th>
+                    <th className="w-[14%] border-r border-slate-200 px-2 py-1.5 text-left">Điều khoản TT</th>
+                    <th className="w-[22%] border-r border-slate-200 px-2 py-1.5 text-left">File báo giá</th>
+                    <th className="w-[12%] border-r border-slate-200 px-2 py-1.5 text-right">Số tiền</th>
+                    {!readOnly && <th className="w-10 px-2 py-1.5"></th>}
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-slate-100">
@@ -1817,7 +1821,7 @@ function HangMucCard({
                         </td>
                         <td className="border-r border-slate-200 px-2 py-1.5 text-[11px] text-slate-600">
                           {s.contactEmail
-                            ? <span className="truncate" title={s.contactEmail}>{s.contactEmail}</span>
+                            ? <span className="block truncate" title={s.contactEmail}>{s.contactEmail}</span>
                             : <span className="text-slate-300">—</span>}
                         </td>
                         <td className="border-r border-slate-200 px-2 py-1.5 text-[11px]">