From d6678f9b3abd75921f9bd0eb998eefa941765b56 Mon Sep 17 00:00:00 2001
From: GitStart <1501599+gitstart@users.noreply.github.com>
Date: Fri, 27 May 2022 18:38:50 +0800
Subject: [PATCH] fix: overflowing text on teams page - using tailwind
 line-clamp (#2843)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: Júlio Piubello da Silva Cabral <julio.piubello@gitstart.dev>
---
 apps/web/components/team/screens/Team.tsx | 2 +-
 packages/config/package.json              | 1 +
 packages/config/tailwind-preset.js        | 6 +++++-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index a7a26338c3..17d2ae0b91 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -55,7 +55,7 @@ const Team = ({ team }: TeamPageProps) => {
               imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
               className="-mt-4 h-12 w-12"
             />
-            <section className="mt-2 w-full space-y-1">
+            <section className="line-clamp-4 mt-2 w-full space-y-1">
               <Text variant="title">{member.name}</Text>
               <Text variant="subtitle" className="">
                 {member.bio || t("user_from_team", { user: member.name, team: team.name })}
diff --git a/packages/config/package.json b/packages/config/package.json
index 6f6d36f43e..3adf1f6b46 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -15,6 +15,7 @@
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.1",
+    "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.2",
     "@trivago/prettier-plugin-sort-imports": "3.2.0",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
index 9da654607f..afd57f7740 100644
--- a/packages/config/tailwind-preset.js
+++ b/packages/config/tailwind-preset.js
@@ -143,5 +143,9 @@ module.exports = {
       }),
     },
   },
-  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")],
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/line-clamp"),
+  ],
 };