fix(ui): added spacing betwen action buttons in edit json key

Author: valkirilov

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/monaco-editor/MonacoEditor.tsx

@@ -13,6 +13,8 @@ import {
   PrimaryButton,
   SecondaryButton,
 } from 'uiSrc/components/base/forms/buttons'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Spacer } from 'uiSrc/components/base/layout'
 import { BaseProps } from '../interfaces'
 import { useChangeEditorType } from '../../change-editor-type-button'
 
@@ -64,8 +66,8 @@ const MonacoEditor = (props: BaseProps) => {
         editorWrapperClassName={styles.editorWrapper}
         onEditorDidMount={onEditorDidMount}
       />
-
-      <EuiFlexItem className={styles.actions}>
+      <Spacer size="m" />
+      <Row justify="end" gap="m" className={styles.actions}>
         <SecondaryButton
           onClick={switchEditorType}
           data-testid="json-data-cancel-btn"
@@ -80,7 +82,7 @@ const MonacoEditor = (props: BaseProps) => {
         >
           Overwrite Data
         </PrimaryButton>
-      </EuiFlexItem>
+      </Row>
     </div>
   )
 }

redisinsight/ui/src/pages/browser/modules/key-details/components/rejson-details/styles.module.scss

@@ -283,21 +283,6 @@
   }
 }
 
-.actions {
-  margin-top: 1em;
-  display: flex;
-  flex-direction: row !important;
-  width: 100%;
-  justify-content: flex-end;
-
-  button {
-
-    &:first-of-type {
-      margin-right: 1em;
-    }
-  }
-}
-
 .editor, .editorWrapper {
   // Using 100% height starts a weird Monaco animation,
   // which causes the editor to overflow its container.