From 6bd60cf0bafea52acf927b062b152b4395dcf3ea Mon Sep 17 00:00:00 2001
From: Alexandre Bourdin <abourdin@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:06:13 +0200
Subject: [PATCH] Merge pull request #14141 from
 overleaf/mf-fix-managed-users-new-design-system

Fix managed users UI for new design system

GitOrigin-RevId: 299ffcee23d9b066bd892cc1a67985ea305a491d
---
 .../managed-users/managed-user-dropdown-button.tsx |  4 ++--
 .../components/managed-users/managed-user-row.tsx  | 14 ++++++--------
 .../stylesheets/components/group-members.less      |  4 ++++
 services/web/frontend/stylesheets/main-style.less  |  1 +
 4 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button.tsx
index 74a794bc1e..6b769584f0 100644
--- a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button.tsx
+++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-dropdown-button.tsx
@@ -20,7 +20,7 @@ export default function ManagedUserDropdownButton({
   }
 
   return (
-    <>
+    <span className="managed-user-actions">
       <ControlledDropdown id={`managed-user-dropdown-${user._id}`}>
         <Dropdown.Toggle
           bsStyle={null}
@@ -48,6 +48,6 @@ export default function ManagedUserDropdownButton({
           )}
         </Dropdown.Menu>
       </ControlledDropdown>
-    </>
+    </span>
   )
 }
diff --git a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
index e1961ab46a..ac37c1016a 100644
--- a/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
+++ b/services/web/frontend/js/features/group-management/components/managed-users/managed-user-row.tsx
@@ -98,15 +98,13 @@ export default function ManagedUserRow({
             : 'N/A'}
         </Col>
         <Col xs={2}>
-          <span className="pull-right">
+          <div className="managed-user-security">
             <ManagedUserStatus user={user} />
-            <span className="managed-user-actions">
-              <ManagedUserDropdownButton
-                user={user}
-                openOffboardingModalForUser={openOffboardingModalForUser}
-              />
-            </span>
-          </span>
+            <ManagedUserDropdownButton
+              user={user}
+              openOffboardingModalForUser={openOffboardingModalForUser}
+            />
+          </div>
         </Col>
       </Row>
     </li>
diff --git a/services/web/frontend/stylesheets/components/group-members.less b/services/web/frontend/stylesheets/components/group-members.less
index 221b87a815..0651ed9ec3 100644
--- a/services/web/frontend/stylesheets/components/group-members.less
+++ b/services/web/frontend/stylesheets/components/group-members.less
@@ -20,6 +20,10 @@
   .managed-user-row {
     overflow-wrap: break-word;
   }
+  .managed-user-security {
+    display: flex;
+    justify-content: space-between;
+  }
   .managed-user-actions {
     button.dropdown-toggle {
       color: @text-color;
diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less
index 75876425cf..5ea245528f 100644
--- a/services/web/frontend/stylesheets/main-style.less
+++ b/services/web/frontend/stylesheets/main-style.less
@@ -90,6 +90,7 @@
 @import 'components/navs-ol.less';
 @import 'components/pagination.less';
 @import 'components/tabs.less';
+@import 'components/group-members.less';
 
 // ngTagsInput
 @import 'components/tags-input.less';