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: KIvanow

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" />