Merge pull request #14141 from overleaf/mf-fix-managed-users-new-design-system

Fix managed users UI for new design system

GitOrigin-RevId: 299ffcee23d9b066bd892cc1a67985ea305a491d

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

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>
+          </div>
         </Col>
       </Row>
     </li>

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;

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';