From e62ad8662789e1e0c103bf8cdd455900b839a09b Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 19 Nov 2025 12:42:09 +0200
Subject: [PATCH 1/5] remove spacer on db index

---
 .../pages/home/components/form/DbIndex.tsx    | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
index 4b2904c794..4d9fbb9440 100644
--- a/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/DbIndex.tsx
@@ -49,26 +49,23 @@ const DbIndex = (props: Props) => {
       </Row>
 
       {formik.values.showDb && (
-        <>
-          <Spacer />
-          <Row gap="m" responsive>
-            <FlexItem grow className={styles.dbInput}>
-              <FormField label="Database Index">
-                <NumericInput
-                  autoValidate
-                  min={0}
-                  name="db"
-                  id="db"
-                  data-testid="db"
-                  placeholder="Enter Database Index"
-                  value={Number(formik.values.db)}
-                  onChange={(value) => formik.setFieldValue('db', value)}
-                />
-              </FormField>
-            </FlexItem>
-            <FlexItem grow />
-          </Row>
-        </>
+        <Row gap="m" responsive>
+          <FlexItem grow className={styles.dbInput}>
+            <FormField label="Database Index">
+              <NumericInput
+                autoValidate
+                min={0}
+                name="db"
+                id="db"
+                data-testid="db"
+                placeholder="Enter Database Index"
+                value={Number(formik.values.db)}
+                onChange={(value) => formik.setFieldValue('db', value)}
+              />
+            </FormField>
+          </FlexItem>
+          <FlexItem grow />
+        </Row>
       )}
     </>
   )

From 57b5b53fd036f611832dd314cfb80d2e286d89ad Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 19 Nov 2025 12:43:39 +0200
Subject: [PATCH 2/5] remove spacers and apply cols with gaps on ssh details

---
 .../pages/home/components/form/SSHDetails.tsx | 271 +++++++++---------
 1 file changed, 131 insertions(+), 140 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
index 94b8910871..ce0f0710eb 100644
--- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
@@ -17,7 +17,6 @@ import {
 } from 'uiSrc/components/base/inputs'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { RiRadioGroup } from 'uiSrc/components/base/forms/radio-group/RadioGroup'
-import { Spacer } from 'uiSrc/components/base/layout'
 import { Text } from 'uiSrc/components/base/text/Text'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
 
@@ -67,100 +66,149 @@ const SSHDetails = (props: Props) => {
       </Row>
 
       {formik.values.ssh && (
-        <>
-          <Spacer size="xs" />
-          <Col gap="m">
-            <Row gap="m" responsive className={flexGroupClassName}>
-              <FlexItem grow className={flexItemClassName}>
-                <FormField label="Host" required>
-                  <TextInput
-                    name="sshHost"
-                    id="sshHost"
-                    data-testid="sshHost"
-                    color="secondary"
-                    maxLength={200}
-                    placeholder="Enter SSH Host"
-                    value={formik.values.sshHost ?? ''}
-                    onChange={(value) => {
-                      formik.setFieldValue(
-                        'sshHost',
-                        validateField(value.trim()),
-                      )
-                    }}
-                  />
-                </FormField>
-              </FlexItem>
-              <FlexItem grow className={flexItemClassName}>
-                <FormField label="Port" required>
-                  <NumericInput
-                    autoValidate
-                    min={0}
-                    max={MAX_PORT_NUMBER}
-                    name="sshPort"
-                    id="sshPort"
-                    data-testid="sshPort"
-                    placeholder="Enter SSH Port"
-                    value={Number(formik.values.sshPort)}
-                    onChange={(value) => formik.setFieldValue('sshPort', value)}
-                    onFocus={selectOnFocus}
-                  />
-                </FormField>
-              </FlexItem>
-            </Row>
+        <Col gap="l">
+          <Row gap="m" responsive className={flexGroupClassName}>
+            <FlexItem grow className={flexItemClassName}>
+              <FormField label="Host" required>
+                <TextInput
+                  name="sshHost"
+                  id="sshHost"
+                  data-testid="sshHost"
+                  color="secondary"
+                  maxLength={200}
+                  placeholder="Enter SSH Host"
+                  value={formik.values.sshHost ?? ''}
+                  onChange={(value) => {
+                    formik.setFieldValue('sshHost', validateField(value.trim()))
+                  }}
+                />
+              </FormField>
+            </FlexItem>
+            <FlexItem grow className={flexItemClassName}>
+              <FormField label="Port" required>
+                <NumericInput
+                  autoValidate
+                  min={0}
+                  max={MAX_PORT_NUMBER}
+                  name="sshPort"
+                  id="sshPort"
+                  data-testid="sshPort"
+                  placeholder="Enter SSH Port"
+                  value={Number(formik.values.sshPort)}
+                  onChange={(value) => formik.setFieldValue('sshPort', value)}
+                  onFocus={selectOnFocus}
+                />
+              </FormField>
+            </FlexItem>
+          </Row>
+          <Row responsive className={flexGroupClassName}>
+            <FlexItem grow className={flexItemClassName}>
+              <FormField label="Username" required>
+                <TextInput
+                  name="sshUsername"
+                  id="sshUsername"
+                  data-testid="sshUsername"
+                  color="secondary"
+                  maxLength={200}
+                  placeholder="Enter SSH Username"
+                  value={formik.values.sshUsername ?? ''}
+                  onChange={(value) => {
+                    formik.setFieldValue(
+                      'sshUsername',
+                      validateField(value.trim()),
+                    )
+                  }}
+                />
+              </FormField>
+            </FlexItem>
+          </Row>
+          <Row responsive className={flexGroupClassName}>
+            <FlexItem grow className={flexItemClassName}>
+              <RiRadioGroup
+                id="sshPassType"
+                items={sshPassTypeOptions}
+                layout="horizontal"
+                value={formik.values.sshPassType}
+                onChange={(id) => formik.setFieldValue('sshPassType', id)}
+                data-testid="ssh-pass-type"
+              />
+            </FlexItem>
+          </Row>
+          {formik.values.sshPassType === SshPassType.Password && (
             <Row responsive className={flexGroupClassName}>
               <FlexItem grow className={flexItemClassName}>
-                <FormField label="Username" required>
-                  <TextInput
-                    name="sshUsername"
-                    id="sshUsername"
-                    data-testid="sshUsername"
-                    color="secondary"
-                    maxLength={200}
-                    placeholder="Enter SSH Username"
-                    value={formik.values.sshUsername ?? ''}
-                    onChange={(value) => {
-                      formik.setFieldValue(
-                        'sshUsername',
-                        validateField(value.trim()),
-                      )
+                <FormField label="Password">
+                  <PasswordInput
+                    name="sshPassword"
+                    id="sshPassword"
+                    data-testid="sshPassword"
+                    maxLength={10_000}
+                    placeholder="Enter SSH Password"
+                    value={
+                      formik.values.sshPassword === true
+                        ? SECURITY_FIELD
+                        : (formik.values.sshPassword ?? '')
+                    }
+                    onChangeCapture={formik.handleChange}
+                    onFocus={() => {
+                      if (formik.values.sshPassword === true) {
+                        formik.setFieldValue('sshPassword', '')
+                      }
                     }}
+                    autoComplete="new-password"
                   />
                 </FormField>
               </FlexItem>
             </Row>
-            <Row responsive className={flexGroupClassName}>
-              <FlexItem grow className={flexItemClassName}>
-                <Spacer size="m" />
-                <RiRadioGroup
-                  id="sshPassType"
-                  items={sshPassTypeOptions}
-                  layout="horizontal"
-                  value={formik.values.sshPassType}
-                  onChange={(id) => formik.setFieldValue('sshPassType', id)}
-                  data-testid="ssh-pass-type"
-                />
-                <Spacer size="s" />
-              </FlexItem>
-            </Row>
-            {formik.values.sshPassType === SshPassType.Password && (
+          )}
+
+          {formik.values.sshPassType === SshPassType.PrivateKey && (
+            <Col gap="l">
+              <Row responsive className={flexGroupClassName}>
+                <FlexItem grow className={flexItemClassName}>
+                  <FormField label="Private Key" required>
+                    <TextArea
+                      name="sshPrivateKey"
+                      id="sshPrivateKey"
+                      data-testid="sshPrivateKey"
+                      maxLength={50_000}
+                      placeholder="Enter SSH Private Key in PEM format"
+                      value={
+                        formik.values.sshPrivateKey === true
+                          ? SECURITY_FIELD
+                          : (formik?.values?.sshPrivateKey?.replace(
+                            /./g,
+                            '•',
+                          ) ?? '')
+                      }
+                      onChangeCapture={formik.handleChange}
+                      onFocus={() => {
+                        if (formik.values.sshPrivateKey === true) {
+                          formik.setFieldValue('sshPrivateKey', '')
+                        }
+                      }}
+                    />
+                  </FormField>
+                </FlexItem>
+              </Row>
               <Row responsive className={flexGroupClassName}>
                 <FlexItem grow className={flexItemClassName}>
-                  <FormField label="Password">
+                  <FormField label="Passphrase">
                     <PasswordInput
-                      name="sshPassword"
-                      id="sshPassword"
-                      data-testid="sshPassword"
-                      maxLength={10_000}
-                      placeholder="Enter SSH Password"
+                      name="sshPassphrase"
+                      id="sshPassphrase"
+                      data-testid="sshPassphrase"
+                      maxLength={50_000}
+                      placeholder="Enter Passphrase for Private Key"
                       value={
-                        formik.values.sshPassword === true
+                        formik.values.sshPassphrase === true
                           ? SECURITY_FIELD
-                          : (formik.values.sshPassword ?? '')
+                          : (formik.values.sshPassphrase ?? '')
                       }
                       onChangeCapture={formik.handleChange}
                       onFocus={() => {
-                        if (formik.values.sshPassword === true) {
-                          formik.setFieldValue('sshPassword', '')
+                        if (formik.values.sshPassphrase === true) {
+                          formik.setFieldValue('sshPassphrase', '')
                         }
                       }}
                       autoComplete="new-password"
@@ -168,66 +216,9 @@ const SSHDetails = (props: Props) => {
                   </FormField>
                 </FlexItem>
               </Row>
-            )}
-
-            {formik.values.sshPassType === SshPassType.PrivateKey && (
-              <Col gap="l">
-                <Row responsive className={flexGroupClassName}>
-                  <FlexItem grow className={flexItemClassName}>
-                    <FormField label="Private Key" required>
-                      <TextArea
-                        name="sshPrivateKey"
-                        id="sshPrivateKey"
-                        data-testid="sshPrivateKey"
-                        maxLength={50_000}
-                        placeholder="Enter SSH Private Key in PEM format"
-                        value={
-                          formik.values.sshPrivateKey === true
-                            ? SECURITY_FIELD
-                            : (formik?.values?.sshPrivateKey?.replace(
-                                /./g,
-                                '•',
-                              ) ?? '')
-                        }
-                        onChangeCapture={formik.handleChange}
-                        onFocus={() => {
-                          if (formik.values.sshPrivateKey === true) {
-                            formik.setFieldValue('sshPrivateKey', '')
-                          }
-                        }}
-                      />
-                    </FormField>
-                  </FlexItem>
-                </Row>
-                <Row responsive className={flexGroupClassName}>
-                  <FlexItem grow className={flexItemClassName}>
-                    <FormField label="Passphrase">
-                      <PasswordInput
-                        name="sshPassphrase"
-                        id="sshPassphrase"
-                        data-testid="sshPassphrase"
-                        maxLength={50_000}
-                        placeholder="Enter Passphrase for Private Key"
-                        value={
-                          formik.values.sshPassphrase === true
-                            ? SECURITY_FIELD
-                            : (formik.values.sshPassphrase ?? '')
-                        }
-                        onChangeCapture={formik.handleChange}
-                        onFocus={() => {
-                          if (formik.values.sshPassphrase === true) {
-                            formik.setFieldValue('sshPassphrase', '')
-                          }
-                        }}
-                        autoComplete="new-password"
-                      />
-                    </FormField>
-                  </FlexItem>
-                </Row>
-              </Col>
-            )}
-          </Col>
-        </>
+            </Col>
+          )}
+        </Col>
       )}
     </Col>
   )

From 12fd63fc7c4e79ad9c089c5989fb38767cbe7207 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 19 Nov 2025 12:44:26 +0200
Subject: [PATCH 3/5] remove spacers and apply cols with gaps on tls details

---
 .../pages/home/components/form/TlsDetails.tsx | 139 ++++++++----------
 1 file changed, 59 insertions(+), 80 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
index 6296f046a9..d16d2b3932 100644
--- a/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/TlsDetails.tsx
@@ -20,8 +20,7 @@ import { DbConnectionInfo } from 'uiSrc/pages/home/interfaces'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import { deleteCaCertificateAction } from 'uiSrc/slices/instances/caCerts'
 import { deleteClientCertAction } from 'uiSrc/slices/instances/clientCerts'
-import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
-import { Spacer } from 'uiSrc/components/base/layout/spacer'
+import { Col, FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Checkbox } from 'uiSrc/components/base/forms/checkbox/Checkbox'
 import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { TextArea, TextInput } from 'uiSrc/components/base/inputs'
@@ -185,7 +184,7 @@ const TlsDetails = (props: Props) => {
   const verifyTlsId = useGenerateId('', ' verifyServerTlsCert')
   const isTlsAuthId = useGenerateId('', ' is_tls_client_auth_required')
   return (
-    <>
+    <Col gap="l">
       <Row gap="m">
         <FlexItem>
           <FormField>
@@ -202,8 +201,7 @@ const TlsDetails = (props: Props) => {
       </Row>
 
       {formik.values.tls && (
-        <>
-          <Spacer />
+        <Col gap="l">
           <Row gap="m">
             <FlexItem grow={1}>
               <Checkbox
@@ -223,31 +221,27 @@ const TlsDetails = (props: Props) => {
             </FlexItem>
           </Row>
           {formik.values.sni && (
-            <>
-              <Spacer />
-              <Row gap="m">
-                <FlexItem grow>
-                  <FormField label="Server Name" required>
-                    <TextInput
-                      name="servername"
-                      id="servername"
-                      maxLength={200}
-                      placeholder="Enter Server Name"
-                      value={formik.values.servername ?? ''}
-                      onChange={(value) =>
-                        formik.setFieldValue(
-                          'servername',
-                          validateField(value.trim()),
-                        )
-                      }
-                      data-testid="sni-servername"
-                    />
-                  </FormField>
-                </FlexItem>
-              </Row>
-            </>
+            <Row gap="m">
+              <FlexItem grow>
+                <FormField label="Server Name" required>
+                  <TextInput
+                    name="servername"
+                    id="servername"
+                    maxLength={200}
+                    placeholder="Enter Server Name"
+                    value={formik.values.servername ?? ''}
+                    onChange={(value) =>
+                      formik.setFieldValue(
+                        'servername',
+                        validateField(value.trim()),
+                      )
+                    }
+                    data-testid="sni-servername"
+                  />
+                </FormField>
+              </FlexItem>
+            </Row>
           )}
-          <Spacer />
           <Row gap="m" responsive>
             <FlexItem
               grow
@@ -263,11 +257,10 @@ const TlsDetails = (props: Props) => {
               />
             </FlexItem>
           </Row>
-        </>
+        </Col>
       )}
       {formik.values.tls && (
-        <div className="boxSection">
-          <Spacer />
+        <Col gap="l"  >
           <Row gap="m" responsive>
             <FlexItem>
               <FormField
@@ -316,53 +309,41 @@ const TlsDetails = (props: Props) => {
 
           {formik.values.tls &&
             formik.values.selectedCaCertName === ADD_NEW_CA_CERT && (
-              <>
-                <Spacer />
-                <Row gap="m" responsive>
-                  <FlexItem grow>
-                    <FormField label="Certificate" required>
-                      <TextArea
-                        name="newCaCert"
-                        id="newCaCert"
-                        value={formik.values.newCaCert ?? ''}
-                        onChangeCapture={formik.handleChange}
-                        placeholder="Enter CA Certificate"
-                        data-testid="new-ca-cert"
-                      />
-                    </FormField>
-                  </FlexItem>
-                </Row>
-              </>
+              <Row gap="m" responsive>
+                <FlexItem grow>
+                  <FormField label="Certificate" required>
+                    <TextArea
+                      name="newCaCert"
+                      id="newCaCert"
+                      value={formik.values.newCaCert ?? ''}
+                      onChangeCapture={formik.handleChange}
+                      placeholder="Enter CA Certificate"
+                      data-testid="new-ca-cert"
+                    />
+                  </FormField>
+                </FlexItem>
+              </Row>
             )}
-        </div>
+        </Col>
       )}
       {formik.values.tls && (
-        <>
-          <Spacer />
-          <Row responsive>
-            <FlexItem grow>
-              <Checkbox
-                id={isTlsAuthId}
-                name="tlsClientAuthRequired"
-                label="Requires TLS Client Authentication"
-                checked={!!formik.values.tlsClientAuthRequired}
-                onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                  formik.setFieldValue(
-                    'tlsClientAuthRequired',
-                    e.target.checked,
-                  )
-                }
-                data-testid="tls-required-checkbox"
-              />
-            </FlexItem>
-          </Row>
-        </>
+        <Row responsive>
+          <FlexItem grow>
+            <Checkbox
+              id={isTlsAuthId}
+              name="tlsClientAuthRequired"
+              label="Requires TLS Client Authentication"
+              checked={!!formik.values.tlsClientAuthRequired}
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                formik.setFieldValue('tlsClientAuthRequired', e.target.checked)
+              }
+              data-testid="tls-required-checkbox"
+            />
+          </FlexItem>
+        </Row>
       )}
       {formik.values.tls && formik.values.tlsClientAuthRequired && (
-        <div
-          className={cx('boxSection', styles.tslBoxSection)}
-          style={{ marginTop: 15 }}
-        >
+        <Col gap="l">
           <Row gap="m" responsive>
             <FlexItem grow>
               <FormField label="Client Certificate" required>
@@ -406,8 +387,7 @@ const TlsDetails = (props: Props) => {
           {formik.values.tls &&
             formik.values.tlsClientAuthRequired &&
             formik.values.selectedTlsClientCertId === 'ADD_NEW' && (
-              <>
-                <Spacer />
+              <Col gap="l">
                 <Row gap="m" responsive>
                   <FlexItem grow>
                     <FormField label="Certificate" required>
@@ -423,7 +403,6 @@ const TlsDetails = (props: Props) => {
                     </FormField>
                   </FlexItem>
                 </Row>
-                <Spacer />
                 <Row gap="m" responsive>
                   <FlexItem grow>
                     <FormField label="Private Key" required>
@@ -438,11 +417,11 @@ const TlsDetails = (props: Props) => {
                     </FormField>
                   </FlexItem>
                 </Row>
-              </>
+              </Col>
             )}
-        </div>
+        </Col>
       )}
-    </>
+    </Col>
   )
 }
 

From 83dfdabb479e2209ec289a4ca61ec85aecba3cb3 Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 19 Nov 2025 18:18:14 +0200
Subject: [PATCH 4/5] remove unused custom classes from ssh details props and
 usages

---
 .../pages/home/components/form/SSHDetails.tsx | 57 ++++++++-----------
 1 file changed, 25 insertions(+), 32 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
index ce0f0710eb..7acfd444ec 100644
--- a/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/SSHDetails.tsx
@@ -21,8 +21,6 @@ import { Text } from 'uiSrc/components/base/text/Text'
 import { useGenerateId } from 'uiSrc/components/base/utils/hooks/generate-id'
 
 export interface Props {
-  flexGroupClassName?: string
-  flexItemClassName?: string
   formik: FormikProps<DbConnectionInfo>
 }
 
@@ -42,33 +40,28 @@ const sshPassTypeOptions = [
 ]
 
 const SSHDetails = (props: Props) => {
-  const { flexGroupClassName = '', flexItemClassName = '', formik } = props
+  const { formik } = props
   const id = useGenerateId('', ' ssh')
 
   return (
     <Col gap="m">
-      <Row
-        className={flexGroupClassName}
-        align={!flexGroupClassName ? 'end' : undefined}
-      >
-        <FlexItem style={{ width: '230px' }} className={flexItemClassName}>
-          <FormField>
-            <Checkbox
-              id={id}
-              name="ssh"
-              label={<Text>Use SSH Tunnel</Text>}
-              checked={!!formik.values.ssh}
-              onChange={formik.handleChange}
-              data-testid="use-ssh"
-            />
-          </FormField>
-        </FlexItem>
+      <Row>
+        <FormField>
+          <Checkbox
+            id={id}
+            name="ssh"
+            label={<Text>Use SSH Tunnel</Text>}
+            checked={!!formik.values.ssh}
+            onChange={formik.handleChange}
+            data-testid="use-ssh"
+          />
+        </FormField>
       </Row>
 
       {formik.values.ssh && (
         <Col gap="l">
-          <Row gap="m" responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
+          <Row gap="m" responsive>
+            <FlexItem grow>
               <FormField label="Host" required>
                 <TextInput
                   name="sshHost"
@@ -84,7 +77,7 @@ const SSHDetails = (props: Props) => {
                 />
               </FormField>
             </FlexItem>
-            <FlexItem grow className={flexItemClassName}>
+            <FlexItem grow>
               <FormField label="Port" required>
                 <NumericInput
                   autoValidate
@@ -101,8 +94,8 @@ const SSHDetails = (props: Props) => {
               </FormField>
             </FlexItem>
           </Row>
-          <Row responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
+          <Row responsive>
+            <FlexItem grow>
               <FormField label="Username" required>
                 <TextInput
                   name="sshUsername"
@@ -122,8 +115,8 @@ const SSHDetails = (props: Props) => {
               </FormField>
             </FlexItem>
           </Row>
-          <Row responsive className={flexGroupClassName}>
-            <FlexItem grow className={flexItemClassName}>
+          <Row responsive>
+            <FlexItem grow>
               <RiRadioGroup
                 id="sshPassType"
                 items={sshPassTypeOptions}
@@ -135,8 +128,8 @@ const SSHDetails = (props: Props) => {
             </FlexItem>
           </Row>
           {formik.values.sshPassType === SshPassType.Password && (
-            <Row responsive className={flexGroupClassName}>
-              <FlexItem grow className={flexItemClassName}>
+            <Row responsive>
+              <FlexItem grow>
                 <FormField label="Password">
                   <PasswordInput
                     name="sshPassword"
@@ -164,8 +157,8 @@ const SSHDetails = (props: Props) => {
 
           {formik.values.sshPassType === SshPassType.PrivateKey && (
             <Col gap="l">
-              <Row responsive className={flexGroupClassName}>
-                <FlexItem grow className={flexItemClassName}>
+              <Row responsive>
+                <FlexItem grow>
                   <FormField label="Private Key" required>
                     <TextArea
                       name="sshPrivateKey"
@@ -191,8 +184,8 @@ const SSHDetails = (props: Props) => {
                   </FormField>
                 </FlexItem>
               </Row>
-              <Row responsive className={flexGroupClassName}>
-                <FlexItem grow className={flexItemClassName}>
+              <Row responsive>
+                <FlexItem grow>
                   <FormField label="Passphrase">
                     <PasswordInput
                       name="sshPassphrase"

From e8a4c758e22a53f2fdafdf5242add2798c709a9d Mon Sep 17 00:00:00 2001
From: Dijana Antovska <dijana.antovska@redis.com>
Date: Wed, 19 Nov 2025 18:20:20 +0200
Subject: [PATCH 5/5] remove the same classes implement but not used in other
 components

---
 .../form/sentinel/PrimaryGroupSentinel.tsx    | 12 +++++------
 .../form/sentinel/SentinelMasterDatabase.tsx  | 20 +++++++------------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
index 0a33e8cd53..33a4862d79 100644
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/PrimaryGroupSentinel.tsx
@@ -7,17 +7,15 @@ import { FormField } from 'uiSrc/components/base/forms/FormField'
 import { TextInput } from 'uiSrc/components/base/inputs'
 
 export interface Props {
-  flexGroupClassName?: string
-  flexItemClassName?: string
   formik: FormikProps<DbConnectionInfo>
 }
 
 const PrimaryGroupSentinel = (props: Props) => {
-  const { flexGroupClassName = '', flexItemClassName = '', formik } = props
+  const { formik } = props
   return (
     <Col gap="l">
-      <Row gap="m" responsive className={flexGroupClassName}>
-        <FlexItem grow className={flexItemClassName}>
+      <Row gap="m" responsive>
+        <FlexItem grow>
           <FormField label="Database alias" required>
             <TextInput
               name="name"
@@ -31,8 +29,8 @@ const PrimaryGroupSentinel = (props: Props) => {
           </FormField>
         </FlexItem>
       </Row>
-      <Row gap="m" responsive className={flexGroupClassName}>
-        <FlexItem grow className={flexItemClassName}>
+      <Row gap="m" responsive>
+        <FlexItem grow>
           <FormField label="Primary group name" required>
             <TextInput
               name="sentinelMasterName"
diff --git a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx
index 43cdb63df0..a5dbdc3109 100644
--- a/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx
+++ b/redisinsight/ui/src/pages/home/components/form/sentinel/SentinelMasterDatabase.tsx
@@ -11,21 +11,13 @@ import { FormField } from 'uiSrc/components/base/forms/FormField'
 import styles from '../../styles.module.scss'
 
 export interface Props {
-  flexGroupClassName?: string
-  flexItemClassName?: string
   formik: FormikProps<DbConnectionInfo>
   isCloneMode: boolean
   db: Nullable<number>
 }
 
 const SentinelMasterDatabase = (props: Props) => {
-  const {
-    db,
-    isCloneMode,
-    flexGroupClassName = '',
-    flexItemClassName = '',
-    formik,
-  } = props
+  const { db, isCloneMode, formik } = props
   return (
     <>
       {!!db && !isCloneMode && (
@@ -36,8 +28,8 @@ const SentinelMasterDatabase = (props: Props) => {
           </span>
         </Text>
       )}
-      <Row gap="m" responsive className={flexGroupClassName}>
-        <FlexItem grow className={flexItemClassName}>
+      <Row gap="m" responsive>
+        <FlexItem grow>
           <FormField label="Username">
             <TextInput
               name="sentinelMasterUsername"
@@ -45,13 +37,15 @@ const SentinelMasterDatabase = (props: Props) => {
               maxLength={200}
               placeholder="Enter Username"
               value={formik.values.sentinelMasterUsername ?? ''}
-              onChange={(value) => formik.setFieldValue('sentinelMasterUsername', value)}
+              onChange={(value) =>
+                formik.setFieldValue('sentinelMasterUsername', value)
+              }
               data-testid="sentinel-mater-username"
             />
           </FormField>
         </FlexItem>
 
-        <FlexItem grow className={flexItemClassName}>
+        <FlexItem grow>
           <FormField label="Password">
             <PasswordInput
               type="password"