From df129f08102e591d1b44a7932fe81fe5bba6c2fc Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:52:57 +0200
Subject: [PATCH 1/8] add the wrapper components used for all forms regarding
 add / edit database forms

---
 .../pages/home/components/styles.module.ts    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 redisinsight/ui/src/pages/home/components/styles.module.ts

diff --git a/redisinsight/ui/src/pages/home/components/styles.module.ts b/redisinsight/ui/src/pages/home/components/styles.module.ts
new file mode 100644
index 0000000000..8c56f644fe
--- /dev/null
+++ b/redisinsight/ui/src/pages/home/components/styles.module.ts
@@ -0,0 +1,26 @@
+import styled from 'styled-components'
+
+export const FixedWrapper = styled.div`
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`
+
+export const ScrollableWrapper = styled.div<
+  React.HTMLAttributes<HTMLDivElement>
+>`
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: thin;
+  min-height: 0;
+`
+
+export const ContentWrapper = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+`

From 1cd6aa909fbe2d01c5b25a69038d86eaeac06452 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:53:11 +0200
Subject: [PATCH 2/8] add db: apply scrollable wrapper

---
 .../components/add-database-screen/AddDatabaseScreen.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
index af42b4b52e..6d1f65dfa2 100644
--- a/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
+++ b/redisinsight/ui/src/pages/home/components/add-database-screen/AddDatabaseScreen.tsx
@@ -27,6 +27,8 @@ import ConnectionUrl from './components/connection-url'
 import { Values } from './constants'
 import { CustomHorizontalRule } from './AddDatabaseScreen.styles'
 
+import { ScrollableWrapper } from '../styles.module'
+
 export interface Props {
   onSelectOption: (type: AddDbType, db: Nullable<Record<string, any>>) => void
   onClose?: () => void
@@ -102,7 +104,7 @@ const AddDatabaseScreen = (props: Props) => {
   })
 
   return (
-    <div>
+    <ScrollableWrapper>
       <form onSubmit={formik.handleSubmit} data-testid="form">
         <Row responsive>
           <FlexItem grow>
@@ -170,7 +172,7 @@ const AddDatabaseScreen = (props: Props) => {
         onClickOption={handleProceedForm}
         onClose={onClose}
       />
-    </div>
+    </ScrollableWrapper>
   )
 }
 

From 7119919f1ed45785b2e7a124c7f6f7858e9a3c0d Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:54:09 +0200
Subject: [PATCH 3/8] cloud connection form: apply scrollable wrapper and
 remove unused style

---
 .../cloud-connection-form/CloudConnectionForm.tsx         | 8 ++++----
 .../home/components/cloud-connection/styles.module.scss   | 7 -------
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
index 6a7dd5d47d..cabaa2ec9d 100644
--- a/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/cloud-connection/cloud-connection-form/CloudConnectionForm.tsx
@@ -28,7 +28,7 @@ import { RiRadioGroup } from 'uiSrc/components/base/forms/radio-group/RadioGroup
 import { TextInput } from 'uiSrc/components/base/inputs'
 import { ICloudConnectionSubmit } from '../CloudConnectionFormWrapper'
 
-import styles from '../styles.module.scss'
+import { ScrollableWrapper } from '../../styles.module'
 
 export interface Props {
   accessKey: string
@@ -179,7 +179,7 @@ const CloudConnectionForm = (props: Props) => {
   }
 
   const CloudApiForm = (
-    <div className={styles.cloudApi} data-testid="add-db_cloud-api">
+    <div data-testid="add-db_cloud-api">
       <MessageCloudApiKeys />
       <Spacer />
       <WindowEvent event="keydown" handler={onKeyDown} />
@@ -227,7 +227,7 @@ const CloudConnectionForm = (props: Props) => {
   )
 
   return (
-    <div className="getStartedForm eui-yScroll">
+    <ScrollableWrapper>
       <FeatureFlagComponent name={FeatureFlags.cloudSso}>
         <Col gap="l">
           <FlexItem grow>
@@ -252,7 +252,7 @@ const CloudConnectionForm = (props: Props) => {
         />
       )}
       {type === CloudConnectionOptions.ApiKeys && CloudApiForm}
-    </div>
+    </ScrollableWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/cloud-connection/styles.module.scss b/redisinsight/ui/src/pages/home/components/cloud-connection/styles.module.scss
index c457b01e58..44a476ed5d 100644
--- a/redisinsight/ui/src/pages/home/components/cloud-connection/styles.module.scss
+++ b/redisinsight/ui/src/pages/home/components/cloud-connection/styles.module.scss
@@ -1,10 +1,3 @@
-.cloudApi {
-  :global(.euiTextColor),
-  :global(.euiLink) {
-    color: currentColor !important;
-  }
-}
-
 .link {
   text-decoration: underline !important;
 

From 00de381c12aca71ce4c74e1dc2950458248ea7f9 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:55:09 +0200
Subject: [PATCH 4/8] cluster connection form: apply scrollable wrapper and
 content wrapper

---
 .../cluster-connection/ClusterConnectionFormWrapper.tsx  | 9 ++++++---
 .../cluster-connection-form/ClusterConnectionForm.tsx    | 7 ++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx
index 2d6765088e..f4001cd7e6 100644
--- a/redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx
+++ b/redisinsight/ui/src/pages/home/components/cluster-connection/ClusterConnectionFormWrapper.tsx
@@ -16,6 +16,8 @@ import { useModalHeader } from 'uiSrc/contexts/ModalTitleProvider'
 import { Title } from 'uiSrc/components/base/text/Title'
 import ClusterConnectionForm from './cluster-connection-form/ClusterConnectionForm'
 
+import { ContentWrapper } from '../styles.module'
+
 export interface Props {
   onClose?: () => void
 }
@@ -58,7 +60,8 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
 
   const formSubmit = (values: ICredentialsRedisCluster) => {
     sendEventTelemetry({
-      event: TelemetryEvent.CONFIG_DATABASES_REDIS_SOFTWARE_AUTODISCOVERY_SUBMITTED,
+      event:
+        TelemetryEvent.CONFIG_DATABASES_REDIS_SOFTWARE_AUTODISCOVERY_SUBMITTED,
     })
 
     dispatch(fetchInstancesRedisCluster(values, onSuccess))
@@ -77,7 +80,7 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
     )
 
   return (
-    <div ref={formRef}>
+    <ContentWrapper as="div" ref={formRef}>
       <ClusterConnectionForm
         host={credentials?.host ?? ''}
         port={credentials?.port?.toString() ?? ''}
@@ -89,7 +92,7 @@ const ClusterConnectionFormWrapper = ({ onClose }: Props) => {
         onSubmit={formSubmit}
         loading={loading}
       />
-    </div>
+    </ContentWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
index b302575975..f73a905815 100644
--- a/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/cluster-connection/cluster-connection-form/ClusterConnectionForm.tsx
@@ -29,6 +29,8 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { HostInfoTooltipContent } from '../../host-info-tooltip-content/HostInfoTooltipContent'
 
+import { ScrollableWrapper } from '../../styles.module'
+
 export interface Props {
   host: string
   port: string
@@ -187,10 +189,9 @@ const ClusterConnectionForm = (props: Props) => {
   }
 
   return (
-    <div className="getStartedForm eui-yScroll" data-testid="add-db_cluster">
+    <ScrollableWrapper data-testid="add-db_cluster">
       <MessageEnterpriceSoftware />
       <br />
-
       <form>
         <WindowEvent event="keydown" handler={onKeyDown} />
 
@@ -266,7 +267,7 @@ const ClusterConnectionForm = (props: Props) => {
         </Col>
       </form>
       <Footer />
-    </div>
+    </ScrollableWrapper>
   )
 }
 

From 91d2a6f7cf63c590f888bb26c5e1f0bb6006965e Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:55:46 +0200
Subject: [PATCH 5/8] import db: apply scrollable wrapper

---
 .../pages/home/components/import-database/ImportDatabase.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx b/redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx
index e8adfb4862..df24d0b484 100644
--- a/redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx
+++ b/redisinsight/ui/src/pages/home/components/import-database/ImportDatabase.tsx
@@ -25,6 +25,7 @@ import { RiIcon } from 'uiSrc/components/base/icons/RiIcon'
 import ResultsLog from './components/ResultsLog'
 
 import styles from './styles.module.scss'
+import { ScrollableWrapper } from '../styles.module'
 
 export interface Props {
   onClose: () => void
@@ -167,7 +168,7 @@ const ImportDatabase = (props: Props) => {
 
   return (
     <>
-      <div className={styles.formWrapper} data-testid="add-db_import">
+      <ScrollableWrapper data-testid="add-db_import">
         <Col>
           <FlexItem grow>
             {isShowForm && (
@@ -234,7 +235,7 @@ const ImportDatabase = (props: Props) => {
             </FlexItem>
           </Row>
         )}
-      </div>
+      </ScrollableWrapper>
       <Footer />
     </>
   )

From 567a2b08008a26981e3a1c7c02ddf70fdd40764a Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:56:13 +0200
Subject: [PATCH 6/8] all edit / clone forms: apply scrollable + content
 wrapper

---
 .../ManualConnectionForm.tsx                  | 26 ++++++++-----------
 .../manual-connection-form/styles.module.scss | 12 ---------
 2 files changed, 11 insertions(+), 27 deletions(-)
 delete mode 100644 redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/styles.module.scss

diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
index 700bb76303..b319adfc0d 100644
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/ManualConnectionForm.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
 
-import cx from 'classnames'
 import * as keys from 'uiSrc/constants/keys'
 import { resetInstanceUpdateAction } from 'uiSrc/slices/instances/instances'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
@@ -34,7 +33,7 @@ import CloneConnection from './components/CloneConnection'
 import FooterActions from './components/FooterActions'
 import { AddConnection, EditConnection, EditSentinelConnection } from './forms'
 
-import styles from './styles.module.scss'
+import { ScrollableWrapper, ContentWrapper } from '../../styles.module'
 
 export interface Props {
   formFields: DbConnectionInfo
@@ -233,21 +232,18 @@ const ManualConnectionForm = (props: Props) => {
   )
 
   return (
-    <div
-      className={styles.container}
-      data-testid="add-db_manual"
-    >
+    <ContentWrapper data-testid="add-db_manual">
       {isEditMode &&
         !isCloneMode &&
         server?.buildType !== BuildType.RedisStack && (
           <CloneConnection id={id} setIsCloneMode={setIsCloneMode} />
         )}
-      <div className={cx('getStartedForm', styles.content)} ref={formRef}>
+      <ContentWrapper as="div" ref={formRef}>
         {!isEditMode && !isFromCloud && (
           <>
             <Tabs />
             <Spacer />
-            <div className="eui-yScroll">
+            <ScrollableWrapper>
               <AddConnection
                 activeTab={activeTab}
                 formik={formik}
@@ -257,7 +253,7 @@ const ManualConnectionForm = (props: Props) => {
                 caCertificates={caCertificates}
                 buildType={buildType}
               />
-            </div>
+            </ScrollableWrapper>
           </>
         )}
         {(isEditMode || isCloneMode || isFromCloud) &&
@@ -280,7 +276,7 @@ const ManualConnectionForm = (props: Props) => {
               )}
               <Tabs />
               <Spacer />
-              <div className="eui-yScroll">
+              <ScrollableWrapper>
                 <EditConnection
                   activeTab={activeTab}
                   isCloneMode={isCloneMode}
@@ -293,7 +289,7 @@ const ManualConnectionForm = (props: Props) => {
                   caCertificates={caCertificates}
                   buildType={buildType}
                 />
-              </div>
+              </ScrollableWrapper>
             </>
           )}
         {(isEditMode || isCloneMode) &&
@@ -313,7 +309,7 @@ const ManualConnectionForm = (props: Props) => {
               )}
               <Tabs />
               <Spacer />
-              <div className="eui-yScroll">
+              <ScrollableWrapper>
                 <EditSentinelConnection
                   activeTab={activeTab}
                   isCloneMode={isCloneMode}
@@ -324,12 +320,12 @@ const ManualConnectionForm = (props: Props) => {
                   caCertificates={caCertificates}
                   db={db}
                 />
-              </div>
+              </ScrollableWrapper>
             </>
           )}
-      </div>
+      </ContentWrapper>
       <Footer />
-    </div>
+    </ContentWrapper>
   )
 }
 
diff --git a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/styles.module.scss b/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/styles.module.scss
deleted file mode 100644
index 0f5fae0850..0000000000
--- a/redisinsight/ui/src/pages/home/components/manual-connection/manual-connection-form/styles.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  overflow: hidden;
-}

From 23ac4b59b624b9bbe69f8eda5be325fcf6aafaf9 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:56:26 +0200
Subject: [PATCH 7/8] sentinel form: apply wrappers

---
 .../SentinelConnectionForm.tsx                     | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
index 2b0d99d72a..faf32f66e5 100644
--- a/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
+++ b/redisinsight/ui/src/pages/home/components/sentinel-connection/sentinel-connection-form/SentinelConnectionForm.tsx
@@ -22,6 +22,8 @@ import {
 import { RiTooltip } from 'uiSrc/components'
 import { Row } from 'uiSrc/components/base/layout/flex'
 
+import { ContentWrapper, ScrollableWrapper } from '../../styles.module'
+
 export interface Props {
   loading: boolean
   initialValues: DbConnectionInfo
@@ -132,12 +134,8 @@ const SentinelConnectionForm = (props: Props) => {
   }
 
   return (
-    <div
-      className="relative"
-      data-testid="add-db_sentinel"
-      style={{ height: '100%' }}
-    >
-      <div className="getStartedForm eui-yScroll" ref={formRef}>
+    <ContentWrapper data-testid="add-db_sentinel">
+      <ScrollableWrapper as="div" ref={formRef}>
         <MessageSentinel />
         <br />
         <form
@@ -163,9 +161,9 @@ const SentinelConnectionForm = (props: Props) => {
             caCertificates={caCertificates}
           />
         </form>
-      </div>
+      </ScrollableWrapper>
       <Footer />
-    </div>
+    </ContentWrapper>
   )
 }
 

From 4beb981de8985b6ef918dbccfac5fddd04ab9cef Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Tue, 11 Nov 2025 16:56:48 +0200
Subject: [PATCH 8/8] MAIN form panel - apply the fixed wrapper and scroll only
 remains in the wanted scrollable area

---
 .../database-panel-dialog/DatabasePanelDialog.tsx    | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
index 1edac1d06d..8e28a4a006 100644
--- a/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
+++ b/redisinsight/ui/src/pages/home/components/database-panel-dialog/DatabasePanelDialog.tsx
@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
-import { Theme } from '@redis-ui/styles'
-
 
 import { Nullable } from 'uiSrc/utils'
 import { UrlHandlingActions } from 'uiSrc/slices/interfaces/urlHandling'
@@ -40,10 +37,7 @@ import { ChevronLeftIcon } from 'uiSrc/components/base/icons'
 import { FooterDatabaseForm } from 'uiSrc/components/form-dialog/FooterDatabaseForm'
 import { Title } from 'uiSrc/components/base/text'
 
-const ScrollableWrapper = styled.div`
-  height: 100%;
-  overflow: scroll;
-`
+import { FixedWrapper } from '../styles.module'
 
 export interface Props {
   editMode: boolean
@@ -198,13 +192,13 @@ const DatabasePanelDialog = (props: Props) => {
       header={modalHeader ?? <Title size="L">Add database</Title>}
       footer={<FooterDatabaseForm />}
     >
-      <ScrollableWrapper>
+      <FixedWrapper>
         <ModalHeaderProvider
           value={{ modalHeader, setModalHeader: handleSetModalHeader }}
         >
           {Form()}
         </ModalHeaderProvider>
-      </ScrollableWrapper>
+      </FixedWrapper>
     </FormDialog>
   )
 }