From 4e8f982ca21af08b02f36c0370b92fdc78bff136 Mon Sep 17 00:00:00 2001
From: ilkin-overleaf <100852799+ilkin-overleaf@users.noreply.github.com>
Date: Mon, 7 Apr 2025 16:55:51 +0300
Subject: [PATCH] Merge pull request #24682 from
 overleaf/ii-group-members-table-2

[web] Group members table colspan fix 2

GitOrigin-RevId: ddb7438da3c68b74b8f38feb8512175e8c24443d
---
 .../components/members-table/members-list.tsx      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx b/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx
index ca1a5cdf88..408d7512d6 100644
--- a/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx
+++ b/services/web/frontend/js/features/group-management/components/members-table/members-list.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { User } from '../../../../../../types/group-management/user'
 import { useGroupMembersContext } from '../../context/group-members-context'
@@ -28,6 +28,14 @@ export default function MembersList({ groupId }: ManagedUsersListProps) {
   const { users } = useGroupMembersContext()
   const managedUsersActive = getMeta('ol-managedUsersActive')
   const groupSSOActive = getMeta('ol-groupSSOActive')
+  const tHeadRowRef = useRef<HTMLTableRowElement>(null)
+  const [colSpan, setColSpan] = useState(0)
+
+  useEffect(() => {
+    if (tHeadRowRef.current) {
+      setColSpan(tHeadRowRef.current.querySelectorAll('th').length)
+    }
+  }, [])
 
   return (
     <div>
@@ -53,7 +61,7 @@ export default function MembersList({ groupId }: ManagedUsersListProps) {
         data-testid="managed-entities-table"
       >
         <thead>
-          <tr>
+          <tr ref={tHeadRowRef}>
             <SelectAllCheckbox />
             <th className="cell-email">{t('email')}</th>
             <th className="cell-name">{t('name')}</th>
@@ -83,7 +91,7 @@ export default function MembersList({ groupId }: ManagedUsersListProps) {
         <tbody>
           {users.length === 0 && (
             <tr>
-              <td className="text-center" colSpan={4}>
+              <td className="text-center" colSpan={colSpan}>
                 <small>{t('no_members')}</small>
               </td>
             </tr>