From 3c24d3af06ad792096eb26627e58b203c45ee233 Mon Sep 17 00:00:00 2001
From: Ousama Ben Younes <benyounes.ousama@gmail.com>
Date: Sun, 12 Apr 2026 22:29:53 +0000
Subject: [PATCH] fix: add line-clamp and read more toggle to team profile bio
 (#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>
---
 apps/web/modules/team/team-view.tsx  | 26 +++++++++++++++++++++++---
 packages/i18n/locales/en/common.json |  1 +
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index cfabf09c59ad4f..94c7d728de8fad 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -8,6 +8,7 @@
 // 2. org/[orgSlug]/[user]/[type]
 import classNames from "classnames";
 import Link from "next/link";
+import { useCallback, useState } from "react";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import EventTypeDescription from "@calcom/web/modules/event-types/components/EventTypeDescription";
@@ -36,6 +37,13 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
   const isEmbed = useIsEmbed();
   const teamName = team.name || t("nameless_team");
   const isBioEmpty = !team.bio || !team.bio.replace("<p><br></p>", "").length;
+  const [isBioExpanded, setIsBioExpanded] = useState(false);
+  const [isBioClamped, setIsBioClamped] = useState(false);
+  const checkBioClamped = useCallback((node: HTMLDivElement | null) => {
+    if (node) {
+      setIsBioClamped(node.scrollHeight > node.clientHeight);
+    }
+  }, []);
   const metadata = teamMetadataSchema.parse(team.metadata);
 
   const teamOrOrgIsPrivate = team.isPrivate || (team?.parent?.isOrganization && team.parent?.isPrivate);
@@ -154,13 +162,25 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
             {teamName}
           </p>
           {!isBioEmpty && (
-            <>
+            <div>
               {/* biome-ignore lint/security/noDangerouslySetInnerHtml: Content is sanitized via safeBio */}
               <div
-                className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                ref={checkBioClamped}
+                className={classNames(
+                  "text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
+                  !isBioExpanded && "line-clamp-3"
+                )}
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}
               />
-            </>
+              {(isBioClamped || isBioExpanded) && (
+                <button
+                  type="button"
+                  className="text-emphasis mt-1 text-sm font-medium hover:underline"
+                  onClick={() => setIsBioExpanded((prev) => !prev)}>
+                  {isBioExpanded ? t("show_less") : t("show_more")}
+                </button>
+              )}
+            </div>
           )}
         </div>
         {team.isOrganization ? (
diff --git a/packages/i18n/locales/en/common.json b/packages/i18n/locales/en/common.json
index 515683022c646c..0cd29daf760992 100644
--- a/packages/i18n/locales/en/common.json
+++ b/packages/i18n/locales/en/common.json
@@ -3144,6 +3144,7 @@
   "redirect_to": "Redirect to",
   "having_trouble_finding_time": "Having trouble finding a time?",
   "show_more": "Show more",
+  "show_less": "Show less",
   "signup_with_google": "Sign up with Google",
   "signup_with_microsoft": "Sign up with Microsoft",
   "signin_with_microsoft": "Sign in with Microsoft",