#RI-6602 - fix scroll

Author: rsergeenko

redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx

@@ -98,7 +98,7 @@ const AddDatabaseScreen = (props: Props) => {
   })
 
   return (
-    <div>
+    <div className="eui-yScroll">
       <EuiForm
         component="form"
         onSubmit={formik.handleSubmit}

redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx

@@ -220,7 +220,7 @@ const CloudConnectionForm = (props: Props) => {
   )
 
   return (
-    <div className="getStartedForm">
+    <div className="getStartedForm eui-yScroll">
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiFlexItem><EuiText color="subdued" size="s">Connect with:</EuiText></EuiFlexItem>

redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx

@@ -225,7 +225,7 @@ const ClusterConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="getStartedForm" data-testid="add-db_cluster">
+    <div className="getStartedForm eui-yScroll" data-testid="add-db_cluster">
       <MessageEnterpriceSoftware />
       <br />
 

redisinsight/ui/src/pages/home/components/database-panel-dialog/styles.module.scss

@@ -7,10 +7,9 @@
 }
 
 .formWrapper {
-  @include eui.scrollBar;
   flex-grow: 1;
-  overflow-y: auto;
   padding: 16px 24px;
+  height: 100%;
 
   .softwareTypes {
     display: flex;

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx

@@ -229,24 +229,26 @@ const ManualConnectionForm = (props: Props) => {
   )
 
   return (
-    <div className="relative" data-testid="add-db_manual">
+    <div className="relative" data-testid="add-db_manual" style={{ height: '100%' }}>
       {isEditMode && !isCloneMode && server?.buildType !== BuildType.RedisStack && (
         <CloneConnection id={id} setIsCloneMode={setIsCloneMode} />
       )}
-      <div className="getStartedForm" ref={formRef}>
+      <div className={cx('getStartedForm', styles.content)} ref={formRef}>
         {!isEditMode && !isFromCloud && (
           <>
             <Tabs />
             <EuiSpacer />
-            <AddConnection
-              activeTab={activeTab}
-              formik={formik}
-              onKeyDown={onKeyDown}
-              onHostNamePaste={onHostNamePaste}
-              certificates={certificates}
-              caCertificates={caCertificates}
-              buildType={buildType}
-            />
+            <div className="eui-yScroll">
+              <AddConnection
+                activeTab={activeTab}
+                formik={formik}
+                onKeyDown={onKeyDown}
+                onHostNamePaste={onHostNamePaste}
+                certificates={certificates}
+                caCertificates={caCertificates}
+                buildType={buildType}
+              />
+            </div>
           </>
         )}
         {(isEditMode || isCloneMode || isFromCloud) && connectionType !== ConnectionType.Sentinel && (
@@ -268,18 +270,20 @@ const ManualConnectionForm = (props: Props) => {
             )}
             <Tabs />
             <EuiSpacer />
-            <EditConnection
-              activeTab={activeTab}
-              isCloneMode={isCloneMode}
-              isEditMode={isEditMode}
-              isFromCloud={isFromCloud}
-              formik={formik}
-              onKeyDown={onKeyDown}
-              onHostNamePaste={onHostNamePaste}
-              certificates={certificates}
-              caCertificates={caCertificates}
-              buildType={buildType}
-            />
+            <div className="eui-yScroll">
+              <EditConnection
+                activeTab={activeTab}
+                isCloneMode={isCloneMode}
+                isEditMode={isEditMode}
+                isFromCloud={isFromCloud}
+                formik={formik}
+                onKeyDown={onKeyDown}
+                onHostNamePaste={onHostNamePaste}
+                certificates={certificates}
+                caCertificates={caCertificates}
+                buildType={buildType}
+              />
+            </div>
           </>
         )}
         {(isEditMode || isCloneMode) && connectionType === ConnectionType.Sentinel && (
@@ -298,16 +302,18 @@ const ManualConnectionForm = (props: Props) => {
             )}
             <Tabs />
             <EuiSpacer />
-            <EditSentinelConnection
-              activeTab={activeTab}
-              isCloneMode={isCloneMode}
-              formik={formik}
-              onKeyDown={onKeyDown}
-              onHostNamePaste={onHostNamePaste}
-              certificates={certificates}
-              caCertificates={caCertificates}
-              db={db}
-            />
+            <div className="eui-yScroll">
+              <EditSentinelConnection
+                activeTab={activeTab}
+                isCloneMode={isCloneMode}
+                formik={formik}
+                onKeyDown={onKeyDown}
+                onHostNamePaste={onHostNamePaste}
+                certificates={certificates}
+                caCertificates={caCertificates}
+                db={db}
+              />
+            </div>
           </>
         )}
       </div>

redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/styles.module.scss

@@ -9,3 +9,10 @@
     border-bottom-color: transparent !important;
   }
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}

redisinsight/ui/src/pages/home/components/sentinel-connection/SentinelConnectionWrapper.tsx

@@ -106,17 +106,15 @@ const SentinelConnectionWrapper = (props: Props) => {
   )
 
   return (
-    <div>
-      <SentinelConnectionForm
-        initialValues={initialValues}
-        loading={loading}
-        onSubmit={handleConnectionFormSubmit}
-        onClose={onClose}
-        onHostNamePaste={handlePostHostName}
-        certificates={certificates}
-        caCertificates={caCertificates}
-      />
-    </div>
+    <SentinelConnectionForm
+      initialValues={initialValues}
+      loading={loading}
+      onSubmit={handleConnectionFormSubmit}
+      onClose={onClose}
+      onHostNamePaste={handlePostHostName}
+      certificates={certificates}
+      caCertificates={caCertificates}
+    />
   )
 }
 

redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx

@@ -145,8 +145,8 @@ const SentinelConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="relative" data-testid="add-db_sentinel">
-      <div className="getStartedForm" ref={formRef}>
+    <div className="relative" data-testid="add-db_sentinel" style={{ height: '100%' }}>
+      <div className="getStartedForm eui-yScroll" ref={formRef}>
         <MessageSentinel />
         <br />
         <EuiForm