As a student using the Explorer, I want to see the full course title when hovering over a node so I don't have to remember what each code means.
🧠 Context
src/components/CourseNode.tsx renders each node in the prerequisite graph. The node shows the course code (e.g. COMP 2402) and a truncated version of the title below it — both with Tailwind's truncate class, so long titles are cut off at the node boundary.
On desktop, adding a native title attribute to the root element is enough to show the full title on hover via the browser tooltip. This won't work on mobile (no hover), but that's acceptable for now — a proper course detail panel is a future ticket.
🛠️ Implementation Plan
- Open
src/components/CourseNode.tsx.
- Add
title={data.title} to the outermost <div> of the returned JSX. That's the div with className="flex flex-col justify-center rounded border...".
- Run
pnpm dev, open the Explorer, and hover over a node with a long title (e.g. COMP 2402 — Abstract Data Types and Algorithms) to confirm the full title appears in the browser tooltip.
✅ Acceptance Criteria
As a student using the Explorer, I want to see the full course title when hovering over a node so I don't have to remember what each code means.
🧠 Context
src/components/CourseNode.tsxrenders each node in the prerequisite graph. The node shows the course code (e.g.COMP 2402) and a truncated version of the title below it — both with Tailwind'struncateclass, so long titles are cut off at the node boundary.On desktop, adding a native
titleattribute to the root element is enough to show the full title on hover via the browser tooltip. This won't work on mobile (no hover), but that's acceptable for now — a proper course detail panel is a future ticket.🛠️ Implementation Plan
src/components/CourseNode.tsx.title={data.title}to the outermost<div>of the returned JSX. That's thedivwithclassName="flex flex-col justify-center rounded border...".pnpm dev, open the Explorer, and hover over a node with a long title (e.g.COMP 2402 — Abstract Data Types and Algorithms) to confirm the full title appears in the browser tooltip.✅ Acceptance Criteria
pnpm typecheckandpnpm teststill pass