From 007056fdcd26459b3c43a083eff611afb5107a18 Mon Sep 17 00:00:00 2001
From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com>
Date: Tue, 16 Aug 2022 13:33:11 +0530
Subject: [PATCH] Fix(UI): Fixed issue with confirm button falling out of
 container. (#6703)

* Fixed issue with confirm button falling out of container while editing teams on user page

* Moved confirm and cancel buttons below the editor container for editing teams and roles on user details page.

* Moved the cancel and confirm below the edit container for editing display name of user

* Replaced flex divs with antd Space components
---
 .../ui/src/components/Users/Users.component.tsx    | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index d1ea714ce3a..6d23fc7c2f1 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Card, Switch } from 'antd';
+import { Card, Space, Switch } from 'antd';
 import { AxiosError } from 'axios';
 import { capitalize, isEmpty, isEqual, isNil, toLower } from 'lodash';
 import { observer } from 'mobx-react';
@@ -229,7 +229,7 @@ const Users = ({
       return (
         <div className="tw-mt-4 tw-w-full tw-px-3">
           {isDisplayNameEdit ? (
-            <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
+            <Space className="tw-w-full" direction="vertical">
               <input
                 className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-full"
                 data-testid="displayName"
@@ -260,7 +260,7 @@ const Users = ({
                   <FontAwesomeIcon className="tw-w-3.5 tw-h-3.5" icon="check" />
                 </Button>
               </div>
-            </div>
+            </Space>
           ) : (
             <Fragment>
               <span className="tw-text-base tw-font-medium tw-mr-2 tw-overflow-auto">
@@ -384,7 +384,7 @@ const Users = ({
           }>
           <div className="tw-mb-4">
             {isTeamsEdit ? (
-              <div className="tw-flex tw-justify-between tw-items-center tw-gap-2">
+              <Space className="tw-w-full" direction="vertical">
                 <Select
                   isClearable
                   isMulti
@@ -426,7 +426,7 @@ const Users = ({
                     />
                   </Button>
                 </div>
-              </div>
+              </Space>
             ) : (
               teamsElement
             )}
@@ -518,7 +518,7 @@ const Users = ({
           }>
           <div className="tw-mb-4">
             {isRolesEdit ? (
-              <div className="tw-flex tw-items-center tw-justify-between tw-gap-2">
+              <Space className="tw-w-full" direction="vertical">
                 <Select
                   isClearable
                   isMulti
@@ -558,7 +558,7 @@ const Users = ({
                     />
                   </Button>
                 </div>
-              </div>
+              </Space>
             ) : (
               rolesElement
             )}