From d129397a8ff91bcde022c3516582318bd2be6b94 Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Tue, 5 Dec 2023 09:37:41 -0400
Subject: [PATCH] fix: Manage members layout is broken (#3058)

---
 .../pages/OrganisationSettingsPage.js         | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/web/components/pages/OrganisationSettingsPage.js b/frontend/web/components/pages/OrganisationSettingsPage.js
index 2e569253a9a0..02c57d0af32e 100644
--- a/frontend/web/components/pages/OrganisationSettingsPage.js
+++ b/frontend/web/components/pages/OrganisationSettingsPage.js
@@ -26,7 +26,7 @@ import PageTitle from 'components/PageTitle'
 import { getStore } from 'common/store'
 import { getRoles } from 'common/services/useRole'
 
-const widths = [450, 150, 100]
+const widths = [450, 255, 250, 235, 150, 100]
 const rolesWidths = [250, 600, 100]
 const OrganisationSettingsPage = class extends Component {
   static contextTypes = {
@@ -955,23 +955,28 @@ const OrganisationSettingsPage = class extends Component {
                                                   <Flex className='table-column px-3'>
                                                     User
                                                   </Flex>
-                                                  <Flex className='table-column'>
+                                                  <Flex
+                                                    className='table-column'
+                                                    style={{
+                                                      minWidth: widths[1],
+                                                    }}
+                                                  >
                                                     Role
                                                   </Flex>
                                                   <div
-                                                    style={{ width: widths[0] }}
+                                                    style={{ width: widths[2] }}
                                                     className='table-column'
                                                   >
                                                     Action
                                                   </div>
                                                   <div
-                                                    style={{ width: widths[1] }}
+                                                    style={{ width: widths[4] }}
                                                     className='table-column'
                                                   >
                                                     Last logged in
                                                   </div>
                                                   <div
-                                                    style={{ width: widths[2] }}
+                                                    style={{ width: widths[5] }}
                                                     className='table-column text-center'
                                                   >
                                                     Remove
@@ -1021,7 +1026,11 @@ const OrganisationSettingsPage = class extends Component {
                                                     </Flex>
 
                                                     <Flex className='table-column'>
-                                                      <div>
+                                                      <div
+                                                        style={{
+                                                          minWidth: widths[3],
+                                                        }}
+                                                      >
                                                         {organisation.role ===
                                                           'ADMIN' &&
                                                         id !==
@@ -1095,7 +1104,7 @@ const OrganisationSettingsPage = class extends Component {
                                                     {role !== 'ADMIN' ? (
                                                       <div
                                                         style={{
-                                                          width: widths[0],
+                                                          width: widths[2],
                                                         }}
                                                         onClick={onEditClick}
                                                         className='table-column'
@@ -1115,13 +1124,13 @@ const OrganisationSettingsPage = class extends Component {
                                                     ) : (
                                                       <div
                                                         style={{
-                                                          width: widths[0],
+                                                          width: widths[2],
                                                         }}
                                                       ></div>
                                                     )}
                                                     <div
                                                       style={{
-                                                        width: widths[1],
+                                                        width: widths[4],
                                                       }}
                                                       className='table-column'
                                                     >
@@ -1133,7 +1142,7 @@ const OrganisationSettingsPage = class extends Component {
                                                     </div>
                                                     <div
                                                       style={{
-                                                        width: widths[2],
+                                                        width: widths[5],
                                                       }}
                                                       className='table-column text-center'
                                                     >
@@ -1213,7 +1222,7 @@ const OrganisationSettingsPage = class extends Component {
                                                     </div>
                                                     <div
                                                       style={{
-                                                        width: widths[2],
+                                                        width: widths[5],
                                                       }}
                                                       className='table-column text-center'
                                                     >
@@ -1280,7 +1289,7 @@ const OrganisationSettingsPage = class extends Component {
                                                     <div
                                                       className='table-column text-center'
                                                       style={{
-                                                        width: widths[2],
+                                                        width: widths[5],
                                                       }}
                                                     >
                                                       <Button