Fe/feature/ri 7233 key details on web and full screen do not expand to the width of the container and do not have space between each other (#4762)

* RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed spacing between name and ttl, and below the same row

* RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed spacing between different input components

* RI-7233 - key details on web and full screen do not expand to the width of the container and do not have space between each other - fixed styles to stretch from one end to the other

Author: Kristiyan Ivanov

redisinsight/ui/src/pages/browser/components/add-key/AddKey.styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const ContentFields = styled.div`
+  margin: 0 auto;
+  width: 100%;
+` 

redisinsight/ui/src/pages/browser/components/add-key/AddKey.tsx

@@ -34,6 +34,7 @@ import AddKeySet from './AddKeySet'
 import AddKeyList from './AddKeyList'
 import AddKeyReJSON from './AddKeyReJSON'
 import AddKeyStream from './AddKeyStream'
+import { ContentFields } from './AddKey.styles'
 
 import styles from './styles.module.scss'
 
@@ -147,7 +148,7 @@ const AddKey = (props: Props) => {
             )}
           </FlexItem>
           <div className={cx('eui-yScroll', styles.scrollContainer)}>
-            <div className={styles.contentFields}>
+            <ContentFields>
               <AddKeyCommonFields
                 typeSelected={typeSelected}
                 onChangeType={onChangeType}
@@ -198,7 +199,7 @@ const AddKey = (props: Props) => {
               {typeSelected === KeyTypes.Stream && (
                 <AddKeyStream onCancel={closeAddKeyPanel} {...defaultFields} />
               )}
-            </div>
+            </ContentFields>
           </div>
         </Col>
         <div id="formFooterBar" className="formFooterBar" />

redisinsight/ui/src/pages/browser/components/add-key/AddKeyCommonFields/AddKeyCommonFields.tsx

@@ -7,6 +7,7 @@ import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { RiSelect } from 'uiSrc/components/base/forms/select/RiSelect'
 import { FormFieldset } from 'uiSrc/components/base/forms/fieldset'
+import { Spacer } from 'uiSrc/components/base/layout/spacer'
 import { AddCommonFieldsFormConfig as config } from '../constants/fields-config'
 
 import styles from './styles.module.scss'
@@ -47,7 +48,7 @@ const AddKeyCommonFields = (props: Props) => {
 
   return (
     <div className={styles.wrapper}>
-      <Row className={styles.container}>
+      <Row className={styles.container} gap="m">
         <FlexItem grow>
           <FormFieldset
             legend={{ children: 'Select key type', display: 'hidden' }}
@@ -85,6 +86,7 @@ const AddKeyCommonFields = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
+      <Spacer size="m" />
       <FormField label={config.keyName.label}>
         <EuiFieldText
           fullWidth

redisinsight/ui/src/pages/browser/components/add-key/AddKeyHash/AddKeyHash.tsx

@@ -167,7 +167,7 @@ const AddKeyHash = (props: Props) => {
         onClickAdd={addField}
       >
         {(item, index) => (
-          <Row align="center">
+          <Row align="center" gap="m">
             <FlexItem grow={2}>
               <FormField>
                 <EuiFieldText

redisinsight/ui/src/pages/browser/components/add-key/AddKeyZset/AddKeyZset.tsx

@@ -186,7 +186,7 @@ const AddKeyZset = (props: Props) => {
         onClickAdd={addMember}
       >
         {(item, index) => (
-          <Row align="center">
+          <Row align="center" gap="m">
             <FlexItem grow>
               <FormField>
                 <EuiFieldText

redisinsight/ui/src/pages/browser/components/add-multiple-fields/AddMultipleFields.tsx

@@ -28,7 +28,7 @@ const AddMultipleFields = <T,>(props: Props<T>) => {
       className={cx('flexItemNoFullWidth', 'inlineFieldsNoSpace', styles.row)}
       grow
     >
-      <Row align="center" gap="s">
+      <Row align="center" gap="m">
         <FlexItem grow>{child}</FlexItem>
         <FlexItem>
           <RiTooltip content="Remove" position="left">

redisinsight/ui/src/pages/browser/modules/key-details/components/hash-details/add-hash-fields/AddHashFields.tsx

@@ -173,7 +173,7 @@ const AddHashFields = (props: Props) => {
           onClickAdd={addField}
         >
           {(item, index) => (
-            <Row align="center">
+            <Row align="center" gap="m">
               <FlexItem grow={2}>
                 <FormField>
                   <EuiFieldText

redisinsight/ui/src/pages/browser/modules/key-details/components/stream-details/add-stream-entity/StreamEntryFields/StreamEntryFields.tsx

@@ -166,7 +166,7 @@ const StreamEntryFields = (props: Props) => {
             onClickAdd={addField}
           >
             {(item, index) => (
-              <Row align="center">
+              <Row align="center" gap='m'>
                 <FlexItem className={styles.fieldItemWrapper} grow>
                   <FormField>
                     <EuiFieldText