Skip to content

fix: add line-clamp and read more toggle to team profile bio (#27742)#28861

Draft
ousamabenyounes wants to merge 1 commit intocalcom:mainfrom
ousamabenyounes:fix/issue-27742
Draft

fix: add line-clamp and read more toggle to team profile bio (#27742)#28861
ousamabenyounes wants to merge 1 commit intocalcom:mainfrom
ousamabenyounes:fix/issue-27742

Conversation

@ousamabenyounes
Copy link
Copy Markdown

What does this PR do?

Long team/org bio text expanded without restriction, breaking the page layout. This PR adds the same line-clamp + show more/less toggle pattern already used in the user profile page (ProfileBio component in users-public-view.tsx).

Changes

  • apps/web/modules/team/team-view.tsx: Added line-clamp-3 CSS class and a "Show more"/"Show less" toggle button using a callback ref to detect whether the bio text is clamped
  • packages/i18n/locales/en/common.json: Added missing show_less translation key (was already used by the user profile's ProfileBio component but the key was missing)

Consistency with user profile

The user profile page already handles this correctly via the ProfileBio component (line 161 in users-public-view.tsx). This PR replicates the same pattern:

  • useCallback ref to detect if scrollHeight > clientHeight
  • line-clamp-3 class when not expanded
  • Toggle button shown only when text is clamped

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Navigate to a team profile page with a very long bio (>3 lines)
  2. Verify the bio is clamped to 3 lines with a "Show more" button
  3. Click "Show more" — bio expands, button changes to "Show less"
  4. Click "Show less" — bio collapses back to 3 lines
  5. Short bios (<3 lines) should display normally without the toggle

Checklist

  • My code follows the style guidelines of this project
  • My changes generate no new warnings
  • My PR is small and focused (2 files, 24 insertions)

Generated by Claude Code
Vibe coded by ousamabenyounes

…27742)

Long team bio text broke the layout by expanding without restriction.
This applies the same line-clamp-3 + show more/less toggle pattern
already used in the user profile (ProfileBio component).

Also adds the missing "show_less" translation key to en/common.json.

Generated by Claude Code
Vibe coded by ousamabenyounes

Co-Authored-By: Claude <noreply@anthropic.com>
@github-actions github-actions bot added 🐛 bug Something isn't working 🚨 needs approval This feature request has not been reviewed yet by the Product Team and needs approval beforehand labels Apr 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working 🚨 needs approval This feature request has not been reviewed yet by the Product Team and needs approval beforehand size/S

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix Long profile about breaks layout — add line clamp and read more toggle

1 participant