Add UI Truncation for Long Names & Text

Description

Long names, bios, titles, and quote text currently break table layouts, overflow cards, and push nav elements out of alignment. This is fixed at two layers: the Zod schemas (#341) prevent oversized strings from being written, and Tailwind truncation classes ensure any existing long data renders gracefully in the UI.

Associated Epic: #340

Subtasks

Single-line truncation (truncate = overflow-hidden text-ellipsis whitespace-nowrap):

Officer cards: officer name, position title
User/members table rows: name column, email column
Mentor cards: mentor name
Project cards/rows: project title, lead name
Quote attribution line: author name
Dashboard sidebar user display: name
All nav/header user name displays

Multi-line clamp (line-clamp-N):

Mentor bio previews: line-clamp-3
Project description previews: line-clamp-2
Sponsor description: line-clamp-3
Alumni description / quote: line-clamp-3
Announcement message preview in dashboard list: line-clamp-2
Quote text in QDB list: line-clamp-4

Audit scope:

next/components/ — all shared display components
next/app/(main)/dashboard/ — all section files (UsersSection.tsx, MentorSection.tsx, PositionsSection.tsx, etc.)
next/app/(main)/projects/, /mentoring, /qdb, /about pages

Acceptance Criteria

No UI component overflows its container when rendered with a 200-character name
No UI component overflows its container when rendered with a 2000-character bio/description
Truncated text shows an ellipsis (...)
Full text remains accessible via a tooltip (title attribute) or expand interaction where appropriate

# Add UI Truncation for Long Names & Text ## Description Long names, bios, titles, and quote text currently break table layouts, overflow cards, and push nav elements out of alignment. This is fixed at two layers: the Zod schemas (#341) prevent oversized strings from being written, and Tailwind truncation classes ensure any existing long data renders gracefully in the UI. Associated Epic: #340 ## Subtasks Single-line truncation (truncate = overflow-hidden text-ellipsis whitespace-nowrap): - [ ] Officer cards: officer name, position title - [ ] User/members table rows: name column, email column - [ ] Mentor cards: mentor name - [ ] Project cards/rows: project title, lead name - [ ] Quote attribution line: author name - [ ] Dashboard sidebar user display: name - [ ] All nav/header user name displays Multi-line clamp (line-clamp-N): - [ ] Mentor bio previews: line-clamp-3 - [ ] Project description previews: line-clamp-2 - [ ] Sponsor description: line-clamp-3 - [ ] Alumni description / quote: line-clamp-3 - [ ] Announcement message preview in dashboard list: line-clamp-2 - [ ] Quote text in QDB list: line-clamp-4 Audit scope: - [ ] next/components/ — all shared display components - [ ] next/app/(main)/dashboard/ — all section files (UsersSection.tsx, MentorSection.tsx, PositionsSection.tsx, etc.) - [ ] next/app/(main)/projects/, /mentoring, /qdb, /about pages ## Acceptance Criteria - [ ] No UI component overflows its container when rendered with a 200-character name - [ ] No UI component overflows its container when rendered with a 2000-character bio/description - [ ] Truncated text shows an ellipsis (...) - [ ] Full text remains accessible via a tooltip (title attribute) or expand interaction where appropriate

Rows
Columns

Task: Add UI Truncation for Long Names & Text #345

Add UI Truncation for Long Names & Text

Description

Subtasks

Acceptance Criteria