RI-7283 - Adding JSON elements from the inline editor have the buttons missaligned (#4840)

Author: KIvanow

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/components/add-item/AddItem.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import cx from 'classnames'
 import { useSelector } from 'react-redux'
+import styled from 'styled-components'
 
 import * as keys from 'uiSrc/constants/keys'
 import { rejsonDataSelector } from 'uiSrc/slices/browser/rejson'
@@ -20,6 +21,11 @@ import { JSONErrors } from '../../constants'
 
 import styles from '../../styles.module.scss'
 
+const ControlsWrapper = styled.div.attrs({ className: styles.controls })`
+  height: 34px;
+  min-height: 34px;
+`
+
 export interface Props {
   isPair: boolean
   onCancel: () => void
@@ -126,7 +132,7 @@ const AddItem = (props: Props) => {
                 onCancel={() => setIsConfirmationVisible(false)}
                 onConfirm={confirmApply}
               >
-                <div className={cx(styles.controls)}>
+                <ControlsWrapper>
                   <IconButton
                     size="M"
                     icon={CancelSlimIcon}
@@ -145,7 +151,7 @@ const AddItem = (props: Props) => {
                     className={styles.applyBtn}
                     data-testid="apply-btn"
                   />
-                </div>
+                </ControlsWrapper>
               </ConfirmOverwrite>
             </form>
             {!!error && (