Employee detail rail: fixed width truncates the header when Prep Brief is present; sidebar needs a flexibility + UI refresh pass

[matthewod11-stack]

Description

From v0.2.8 gate QA (2026-07-15, Matt): with the Prep Brief button in the employee header, the name and title truncate to "Ma…" / "Seni…" — you cannot tell whose profile is open. Broader: both sidebars are fixed-size while the chat pane is dynamic; as the right rail grows in importance (Prep Brief lives there, and FHR-112-class features would add more), it needs flexibility — width (resizable or responsive), typography scale, and placement/formatting of the header actions.

Current State

src/components/employees/detail/EmployeeHeader.tsx renders avatar + name/title block + Prep Brief button + Edit in one fixed-width row; name/title get truncate. Rail width is fixed in the app shell layout. Sample-era layout predates the header gaining an action button (#149-era UI generally due a refresh pass — Matt).

Suggested Fix

Two scopes — split if picked up:

• Concrete (small): rework the header so the name stays readable with actions present (actions row below the name block, or icon-only Prep Brief with tooltip at narrow widths)
• Design pass (needs-matt): resizable/responsive right rail, typography scale, and a general UI refresh review of the detail rail

Verification

• npm test passes; visual check: full name visible with Prep Brief button present at default window size

Automation Hints

scope: src/components/employees/detail/, src/components/layout/
do-not-touch: src-tauri/
approach: refactor-types
risk: low
max-files-changed: 6
blocked-by: none
bail-if: requires app-shell layout system rework beyond the rail

Priority

Medium