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
This commit is contained in:
Aniket Katkar 2022-08-16 13:33:11 +05:30 committed by GitHub
parent 30e7312203
commit 007056fdcd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

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