Skip to content

fix(ui): add line-clamp and read more toggle for long profile bios#28237

Closed
deepshekhardas wants to merge 1 commit intocalcom:mainfrom
deepshekhardas:fix/profile-about-line-clamp
Closed

fix(ui): add line-clamp and read more toggle for long profile bios#28237
deepshekhardas wants to merge 1 commit intocalcom:mainfrom
deepshekhardas:fix/profile-about-line-clamp

Conversation

@deepshekhardas
Copy link

What does this PR do?

Adds a line-clamp-3 truncation to the user profile 'About' (bio) section on the public booking page.

The Problem

Long profile bios can expand fully, breaking the layout consistency and reducing readability on the public-facing booking page.

The Solution

  • Wrapped the bio rendering in a BioSection component.
  • Applied Tailwind line-clamp-3 when not expanded.
  • Added a 'Read more' / 'Read less' toggle button to expand the content.
  • Ensured proper sanitization via dangerouslySetInnerHTML.

Fixes #27742

Long profile about text now displays a maximum of 3 lines with a
'Read more' toggle button. This prevents layout inconsistencies
when profiles have very long bio content.

Fixes calcom#27742
@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Mar 2, 2026
@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 Mar 2, 2026
Copy link
Contributor

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues found across 1 file

Copy link
Contributor

@Ryukemeister Ryukemeister left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey there, thank you for creating a PR. can you please attach a visual demo on what this is fixing exactly, thank you!

@romitg2
Copy link
Member

romitg2 commented Mar 2, 2026

@deepshekhardas this PR needs approval from team, will reopen if team approves. Thanks

@romitg2 romitg2 closed this Mar 2, 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 community Created by Linear-GitHub Sync 🚨 needs approval This feature request has not been reviewed yet by the Product Team and needs approval beforehand size/M

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

3 participants