RI-7687: fix double scroll issue on the RDI statistics page (#5172)

* RI-7687: fix double scroll issue on the RDI statistics page

* RI-7687: fix double scroll issue on the RDI statistics page

Author: ArtemHoruzhenko

redisinsight/ui/src/templates/rdi-instance-page-template/RdiInstancePageTemplate.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { ExplorePanelTemplate } from 'uiSrc/templates'
-
-import styles from './styles.module.scss'
+import { RdiInstancePageContentContainer } from 'uiSrc/templates/rdi-instance-page-template/styles'
 
 export interface Props {
   children: React.ReactNode
@@ -11,9 +10,9 @@ const RdiInstancePageTemplate = (props: Props) => {
   const { children } = props
 
   return (
-    <div className={styles.content}>
+    <RdiInstancePageContentContainer>
       <ExplorePanelTemplate>{children}</ExplorePanelTemplate>
-    </div>
+    </RdiInstancePageContentContainer>
   )
 }
 

redisinsight/ui/src/templates/rdi-instance-page-template/styles.module.scss

@@ -2,8 +2,3 @@
   height: 100%;
   padding-bottom: 16px;
 }
-
-.content {
-  height: calc(100% - 130px);
-  flex: 1
-}

redisinsight/ui/src/templates/rdi-instance-page-template/styles.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+import { FlexItem } from 'uiSrc/components/base/layout/flex'
+
+export const RdiInstancePageContentContainer = styled(FlexItem)`
+  height: calc(100% - 210px);
+`