OUT-3174 | Use task title for breadcrumbs instead of task id

[arpandhakal]

Summary

• Breadcrumbs on the task details page now show the task title (truncated to 25 chars) instead of the task id, on both internal-user (iu) and client (cu) views.
• Drive-by fix: useWindowWidth was reading window.outerWidth, which doesn't shrink under Chrome dev-tools device emulation (and reports the parent window inside iframes). Switched to window.innerWidth so the mobile sidebar/description stacking layout fires correctly in dev tools and matches real-device behavior.

Linear: https://linear.app/assemblycom/issue/OUT-3174

Test plan

• Open a task with a long title — breadcrumb shows the title truncated to 25 chars with an ellipsis.
• Open a nested subtask — each ancestor in the breadcrumb shows its (truncated) title and links to the correct task.
• Verify on both an internal-user portal and a client portal.
• In Chrome dev tools, toggle mobile device emulation on the details page — sidebar collapses and description stacks vertically (previously stayed side-by-side).
• On a real mobile device, layout still stacks vertically as before.
• Verify the embedded portal view still renders correctly at its normal width.

Test

An issue I found with the platform header:

• LOOM

🤖 Generated with Claude Code

[linear-code]

OUT-3174 Use task title for breadcrumbs instead of task id

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
tasks-app	Ready	Preview, Comment	Apr 30, 2026 5:55am

[greptile-apps]

Greptile Summary

This PR makes two targeted changes: breadcrumbs on the task detail page now display the task title (truncated to 25 chars via truncateText) instead of the generated label identifier, and useWindowWidth is corrected to read window.innerWidth instead of window.outerWidth for accurate viewport measurement under Chrome DevTools device emulation and inside iframes. Both changes are clean and well-scoped with no pre-existing patterns broken.

Confidence Score: 5/5

Safe to merge — both changes are minimal, correct, and well-tested by the provided test plan.

No P0 or P1 issues found. The title field is guaranteed non-null by the Prisma schema so truncateText receives a valid string. The innerWidth switch is a well-known correctness improvement. No logic, security, or data integrity concerns.

No files require special attention.

Important Files Changed

Filename	Overview
src/app/detail/[task_id]/[user_type]/page.tsx	Breadcrumb items now destructure title from AncestorTaskResponse instead of label and apply truncateText(title, 25). Title is non-nullable in Prisma schema, so no null-safety concern.
src/hooks/useWindowWidth.ts	Switched from window.outerWidth to window.innerWidth; a correct fix for DevTools device emulation and iframe contexts. Affects all 8+ consumer components.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant TaskDetailPage as TaskDetailPage (server)
    participant API as /api/tasks/:id/path

    Browser->>TaskDetailPage: GET /detail/:task_id/:user_type
    TaskDetailPage->>API: fetch task ancestor path
    API-->>TaskDetailPage: AncestorTaskResponse[] (id, title, label, …)
    TaskDetailPage->>TaskDetailPage: taskPath.map({ title, id })<br/>label = truncateText(title, 25)
    TaskDetailPage-->>Browser: Renders HeaderBreadcrumbs<br/>with truncated titles as labels

Loading

_{Reviews (1): Last reviewed commit: "fix(OUT-3174): use task title for breadc..." | Re-trigger Greptile}