finalize form dialog and manage tags modal

Author: dantovska

redisinsight/ui/src/components/form-dialog/FormDialog.tsx

@@ -21,7 +21,8 @@ const FormDialog = (props: Props) => {
 
   return (
     <Modal.Compose open={isOpen}>
-      <Modal.Content.Compose
+      <Modal.Content.Compose 
+        persistent
         className={`${styles.modal} ${className}`}
         onCancel={onClose}
       >

redisinsight/ui/src/pages/home/components/database-manage-tags-modal/ManageTagsModal.tsx

@@ -104,6 +104,7 @@ export const ManageTagsModal = ({
     <FormDialog
       isOpen
       onClose={onClose}
+      className={styles.manageTagsModal}
       header={
         <div className={styles.header}>
           <Title size="M">Manage tags for {instance.name}</Title>
@@ -142,7 +143,6 @@ export const ManageTagsModal = ({
           </div>
         </>
       }
-      className={styles.manageTagsModal}
     >
       <div className={styles.tagForm}>
         <div className={styles.tagFormHeader}>

redisinsight/ui/src/pages/home/components/database-manage-tags-modal/styles.module.scss

@@ -1,19 +1,10 @@
 .manageTagsModal {
   position: fixed !important;
-  right: 0;
-  top: 0;
+  right: 0 !important;
   width: 50% !important;
   height: 100% !important;
   max-height: 100% !important;
   overflow-y: auto;
-  z-index: 1000 !important;
-
-  :global {
-    .euiModalFooter {
-      padding: 0 !important;
-      background-color: inherit;
-    }
-  }
 
   .header {
     padding-left: 14px;
@@ -29,7 +20,7 @@
   }
 
   .addTagButton {
-    margin-left: 32px;
+    margin-left: 12px;
     color: var(--euiColorPrimary) !important;
   }
 
@@ -44,7 +35,7 @@
   }
 
   .tagForm {
-    margin: 0px 32px;
+    margin: 20px 12px;
     border: 1px solid var(--separatorColor);
     border-radius: 8px;