# Session 23 turn 11 — 2026-05-15 — Plan U Sidebar truncate + tooltip

**Dev:** Claude Opus 4.7 1M (em main solo CSS Tailwind polish)
**Duration:** ~20 phút
**Base commit:** `7b7b28f` (Plan T5+T6 docs)
**Final HEAD:** `86d8806` Plan U commit
**Total commits Plan U:** **1**

## 🎯 Trigger session

Bro UAT screenshot 2026-05-15 ~14:45: Submenu "1. Duyệt Nhà Cung Cấp - Thầu phụ (NCC -TP)" trong sidebar fe-user wrap 2 dòng (label ~50 chars vs sidebar `w-60`=240px chỉ fit ~25 chars).

> "chỗ này cho nó ngay hàng thẳng lối nhé."

## 🔍 Root cause

Admin đã rename `Pe_DuyetNcc` DisplayLabel custom qua **Admin Menu eOffice page** (Mig 27 S20 t7) — Label gốc DB = "Duyệt NCC" ngắn, DisplayLabel custom = "1. Duyệt Nhà Cung Cấp - Thầu phụ (NCC -TP)".

FE Layout.tsx render `{effectiveLabel(node)}` (returns DisplayLabel || Label) thẳng vào `<span>` flex KHÔNG có truncate → wrap 2 dòng visual broken.

## 🌳 Plan U execution

### Chunk U1 — FE truncate + tooltip × 2 app mirror (`86d8806`)

👤 Chủ trì Solo (CSS Tailwind polish ~25 LOC mirror).

3 render sites × 2 app:

| Component | File | Pattern |
|---|---|---|
| MenuNodeRenderer button | Layout.tsx line 170-200 | accordion toggle với ChevronDown |
| MenuLeaf NavLink | Layout.tsx line 235-249 | leaf menu item |
| StaticLeaf NavLink | Layout.tsx fe-user line 263-282 | "Hộp thư" static entry (fe-user only) |

**Fix recipe (Tailwind CSS):**

```diff
- <span className="flex items-center gap-2">
+ <span className="flex min-w-0 flex-1 items-center gap-2">
-   <Icon className="h-4 w-4" />
+   <Icon className="h-4 w-4 shrink-0" />
+   <span className="truncate" title={effectiveLabel(node)}>
    {effectiveLabel(node)}
+   </span>
  </span>
- <ChevronDown className="h-3.5 w-3.5 text-slate-400 transition" />
+ <ChevronDown className="h-3.5 w-3.5 shrink-0 text-slate-400 transition" />
```

**Key CSS recipe:**
- `min-w-0 flex-1` parent — **CẦN THIẾT** vì flex child default `min-width: auto` (KHÔNG cho truncate hoạt động)
- `shrink-0` icon + chevron — giữ size không co
- `truncate` (= `overflow-hidden text-ellipsis whitespace-nowrap`) trên span text
- `title={label}` HTML tooltip → user hover xem full label

**fe-admin mirror dùng `node.label`** (admin sidebar luôn show Label gốc, KHÔNG đụng DisplayLabel per S20 t7 Q2=b decision).

**Verify:**
- `npm run build` fe-user PASS 16.79s clean (0 TS err, bundle unchanged ~1275KB)
- `npm run build` fe-admin PASS 8.16s clean (0 TS err, bundle unchanged ~1395KB)
- Diff +25/-17 LOC × 2 file = 8 net LOC

**KHÔNG đụng BE.** Admin tự control DisplayLabel qua Menu eOffice page. Plan U chỉ ensure FE render gracefully với label dài.

## 📊 Stats Plan U chốt

| Metric | Trước (S23 t10) | Sau (S23 t11) | Δ |
|---|---|---|---|
| Migrations | 31 | 31 | 0 |
| Endpoints | ~145 | ~145 | 0 |
| FE pages | 34 | 34 | 0 |
| Unit tests | 111 | 111 | 0 (CSS polish, no test) |
| Gotchas | 47 | 47 | 0 |
| Memory entries | 20 | 20 | 0 (no new + 2 entries reinforced S23 t6 Plan P + S23 t10 Plan T trong cumulative) |
| Skills | 6 | 6 | 0 |
| Sub-agents | 4 | 4 (em main solo Plan U) | — |
| Commits Plan U | — | **1** pushed `86d8806` | done |

## 🎯 Multi-agent ROI Plan U

Em main solo CSS polish ~25 LOC trivial. KHÔNG cần Implementer Case 2 (overhead spawn không xứng < 30 min). Per directive Thứ 9 + criteria #6.

## 📋 Pattern reinforced

**Long-label sidebar handling** — reusable Tailwind recipe:
- `min-w-0 flex-1` parent (mandatory cho truncate flex child)
- `shrink-0` icon/badge/icon-related elements
- `truncate` text span
- `title` tooltip HTML attribute

Cross-project áp dụng cho any sidebar / nav menu / breadcrumb có label dài unpredictable.

## ⏭ Pending S23 wrap

- 🟢 Bro UAT verify Plan U deploy sau ~3-5 phút CI
- 🟡 Plan B Contract V2 wire (Mig 32+33) — HIGH priority next
- 🔍 Discovery #4 ASP.NET enum body deserialization — LOW priority polish (register JsonStringEnumConverter)
- 🔍 Discovery #3 anomaly CI trigger docs-only — 3× reinforced, recommend Investigator follow-up
- 🔧 Gotcha #47 paths-ignore agent-memory — pending

## References

- Files: [fe-user/src/components/Layout.tsx](fe-user/src/components/Layout.tsx) + [fe-admin/src/components/Layout.tsx](fe-admin/src/components/Layout.tsx)
- Rules: §3.9 mirror 2 FE app
- Cross-ref skill `permission-matrix` (menu structure) + memory `feedback_responsive_laptop_breakpoint` (responsive sidebar)