fix: overflowing text on teams page - using tailwind line-clamp (#2843)

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

@@ -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 })}

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",

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"),
+  ],
 };