From 353494c3191811e353694efe6c9f5e1a8a47d5a7 Mon Sep 17 00:00:00 2001
From: yashgoyal0110 <yg364550@gmail.com>
Date: Sun, 30 Mar 2025 00:30:16 +0530
Subject: [PATCH 1/4] use leaders-list for main page

---
 frontend/src/components/LeadersList.tsx | 12 +++++++-----
 frontend/src/pages/Home.tsx             | 15 +++++++++------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/LeadersList.tsx b/frontend/src/components/LeadersList.tsx
index 8ab2fabe76..86df0917b0 100644
--- a/frontend/src/components/LeadersList.tsx
+++ b/frontend/src/components/LeadersList.tsx
@@ -10,6 +10,7 @@ import { LeadersListProps } from 'types/leaders'
  * @param {string} props.leaders - Comma-separated string of leader names
  * @returns {JSX.Element} A list of leader links
  */
+import { TruncatedText } from './TruncatedText'
 
 const LeadersList = ({ leaders }: LeadersListProps) => {
   if (!leaders || leaders.trim() === '') return <>Unknown</>
@@ -17,19 +18,20 @@ const LeadersList = ({ leaders }: LeadersListProps) => {
   const leadersArray = leaders.split(',').map((leader) => leader.trim())
 
   return (
-    <>
+    <span className="flex flex-wrap items-center gap-x-1">
       {leadersArray.map((leader, index) => (
-        <span key={`${leader}-${index}`}>
+        <span key={`${leader}-${index}`} className="flex items-center">
           <Link
             to={`/community/users?q=${encodeURIComponent(leader)}`}
             aria-label={`View profile of ${leader}`}
+            className="hover:underline"
           >
-            {leader}
+            <TruncatedText text={leader} />
           </Link>
-          {index < leadersArray.length - 1 && ', '}
+          {index < leadersArray.length - 1 && <span className="ml-1">, </span>}
         </span>
       ))}
-    </>
+    </span>
   )
 }
 
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index c16d287cb4..19aea8b366 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -23,6 +23,7 @@ import { formatDate, formatDateRange } from 'utils/dateFormatter'
 import AnimatedCounter from 'components/AnimatedCounter'
 import ChapterMap from 'components/ChapterMap'
 import ItemCardList from 'components/ItemCardList'
+import LeadersList from 'components/LeadersList'
 import LoadingSpinner from 'components/LoadingSpinner'
 import MovingLogos from 'components/LogoCarousel'
 import Modal from 'components/Modal'
@@ -196,10 +197,11 @@ export default function Home() {
                       <span>{chapter.suggestedLocation}</span>
                     </div>
                   </div>
+
                   {chapter.leaders.length > 0 && (
-                    <div className="mr-4 mt-1 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-300">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
-                      <span>{chapter.leaders.join(', ')}</span>
+                    <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-300">
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <LeadersList leaders={String(chapter.leaders)} />
                     </div>
                   )}
                 </div>
@@ -228,10 +230,11 @@ export default function Home() {
                       <span>{capitalize(project.type)}</span>
                     </div>
                   </div>
+
                   {project.leaders.length > 0 && (
-                    <div className="mr-4 mt-1 flex flex-wrap items-center text-sm text-gray-600 dark:text-gray-300">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
-                      <span>{project.leaders.join(', ')}</span>
+                    <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-300">
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <LeadersList leaders={String(project.leaders)} />
                     </div>
                   )}
                 </div>

From 3174adcd426e58cd7b24358e942cc0a249ed0ad4 Mon Sep 17 00:00:00 2001
From: yashgoyal0110 <yg364550@gmail.com>
Date: Mon, 31 Mar 2025 20:24:04 +0530
Subject: [PATCH 2/4] commit

---
 frontend/src/components/LeadersList.tsx   | 12 ++++++------
 frontend/src/components/TruncatedText.tsx | 16 ++++++++++++----
 frontend/src/pages/Home.tsx               |  4 ++--
 3 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/LeadersList.tsx b/frontend/src/components/LeadersList.tsx
index 86df0917b0..04f3502962 100644
--- a/frontend/src/components/LeadersList.tsx
+++ b/frontend/src/components/LeadersList.tsx
@@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom'
 import { LeadersListProps } from 'types/leaders'
+import { TruncatedText } from './TruncatedText'
 
 /**
  * Component that renders a list of project leaders as clickable links.
@@ -10,7 +11,6 @@ import { LeadersListProps } from 'types/leaders'
  * @param {string} props.leaders - Comma-separated string of leader names
  * @returns {JSX.Element} A list of leader links
  */
-import { TruncatedText } from './TruncatedText'
 
 const LeadersList = ({ leaders }: LeadersListProps) => {
   if (!leaders || leaders.trim() === '') return <>Unknown</>
@@ -18,20 +18,20 @@ const LeadersList = ({ leaders }: LeadersListProps) => {
   const leadersArray = leaders.split(',').map((leader) => leader.trim())
 
   return (
-    <span className="flex flex-wrap items-center gap-x-1">
+    <TruncatedText>
       {leadersArray.map((leader, index) => (
-        <span key={`${leader}-${index}`} className="flex items-center">
+        <span key={`${leader}-${index}`}>
           <Link
             to={`/community/users?q=${encodeURIComponent(leader)}`}
             aria-label={`View profile of ${leader}`}
             className="hover:underline"
           >
-            <TruncatedText text={leader} />
+            {leader}
           </Link>
-          {index < leadersArray.length - 1 && <span className="ml-1">, </span>}
+          {index < leadersArray.length - 1 && ', '}
         </span>
       ))}
-    </span>
+    </TruncatedText>
   )
 }
 
diff --git a/frontend/src/components/TruncatedText.tsx b/frontend/src/components/TruncatedText.tsx
index 1cf1d60efc..1f36506759 100644
--- a/frontend/src/components/TruncatedText.tsx
+++ b/frontend/src/components/TruncatedText.tsx
@@ -1,12 +1,20 @@
-import { useRef, useEffect, useCallback } from 'react'
+import React, { useRef, useEffect, useCallback } from 'react'
 
-export const TruncatedText = ({ text, className = '' }: { text: string; className?: string }) => {
+export const TruncatedText = ({
+  text,
+  children,
+  className = '',
+}: {
+  text?: string
+  children?: React.ReactNode
+  className?: string
+}) => {
   const textRef = useRef<HTMLSpanElement>(null)
 
   const checkTruncation = useCallback(() => {
     const element = textRef.current
     if (element) {
-      element.title = text
+      element.title = text || element.textContent || ''
     }
   }, [text])
 
@@ -31,7 +39,7 @@ export const TruncatedText = ({ text, className = '' }: { text: string; classNam
       ref={textRef}
       className={`block overflow-hidden truncate text-ellipsis whitespace-nowrap ${className}`}
     >
-      {text}
+      {text || children}
     </span>
   )
 }
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index 19aea8b366..3a8b733e3b 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -192,9 +192,9 @@ export default function Home() {
                       <FontAwesomeIcon icon={faCalendar} className="mr-2 h-4 w-4" />
                       <span>{formatDate(chapter.createdAt)}</span>
                     </div>
-                    <div className="mr-4 flex items-center">
+                    <div className="mr-4 flex flex-1 items-center overflow-hidden">
                       <FontAwesomeIcon icon={faMapMarkerAlt} className="mr-2 h-4 w-4" />
-                      <span>{chapter.suggestedLocation}</span>
+                      <TruncatedText text={chapter.suggestedLocation} />
                     </div>
                   </div>
 

From 5a686ef207729fc17edb76fb61c04a0de5c6178f Mon Sep 17 00:00:00 2001
From: yashgoyal0110 <yg364550@gmail.com>
Date: Mon, 31 Mar 2025 21:40:07 +0530
Subject: [PATCH 3/4] commit

---
 frontend/src/pages/Home.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index d2ebb00045..4b0e030c1c 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -205,7 +205,7 @@ export default function Home() {
 
                   {chapter.leaders.length > 0 && (
                     <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
                       <LeadersList leaders={String(chapter.leaders)} />
                     </div>
                   )}
@@ -238,7 +238,7 @@ export default function Home() {
 
                   {project.leaders.length > 0 && (
                     <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
+                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
                       <LeadersList leaders={String(project.leaders)} />
                     </div>
                   )}

From b10a2f710be7f11f946226d973180459b64c2ee3 Mon Sep 17 00:00:00 2001
From: Arkadii Yakovets <arkadii.yakovets@owasp.org>
Date: Mon, 31 Mar 2025 09:37:26 -0700
Subject: [PATCH 4/4] Update code

---
 frontend/src/pages/Home.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index d266b08cda..cfe3ae2eb5 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -201,7 +201,7 @@ export default function Home() {
 
                   {chapter.leaders.length > 0 && (
                     <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
                       <LeadersList leaders={String(chapter.leaders)} />
                     </div>
                   )}
@@ -234,7 +234,7 @@ export default function Home() {
 
                   {project.leaders.length > 0 && (
                     <div className="mr-4 mt-1 flex items-center gap-x-2 text-sm [&_a]:text-gray-600 dark:[&_a]:text-gray-400">
-                      <FontAwesomeIcon icon={faUsers} className="mr-2 h-4 w-4" />
+                      <FontAwesomeIcon icon={faUsers} className="h-4 w-4" />
                       <LeadersList leaders={String(project.leaders)} />
                     </div>
                   )}