From 33d0b77f7085b6774ff5b29c6b841dbf8fb2dafd Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Thu, 31 Jul 2025 15:33:42 +0300
Subject: [PATCH 1/4] reverse link behavior

---
 redisinsight/ui/src/components/base/link/link.styles.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/redisinsight/ui/src/components/base/link/link.styles.ts b/redisinsight/ui/src/components/base/link/link.styles.ts
index bc83eed310..6ac23139e4 100644
--- a/redisinsight/ui/src/components/base/link/link.styles.ts
+++ b/redisinsight/ui/src/components/base/link/link.styles.ts
@@ -65,10 +65,9 @@ export const useColorTextStyles = ({ $color }: MapProps = {}) => {
 
 export const StyledLink = styled(RedisUiLink)<MapProps>`
   ${useColorTextStyles};
-
-  text-decoration: underline !important;
+  text-decoration: none !important;
 
   &:hover {
-    text-decoration: none !important;
+    text-decoration: underline !important;
   }
 `

From 66096af835e72ff2860af81e56a7ef09f16c7a8b Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Thu, 31 Jul 2025 16:58:44 +0300
Subject: [PATCH 2/4] fixing styles for InlineItemEditor.tsx

---
 .../InlineItemEditor.styles.tsx               | 155 ++++++++++++++++++
 .../inline-item-editor/InlineItemEditor.tsx   |  37 ++---
 .../components/settings-item/SettingItem.tsx  |   4 +-
 3 files changed, 173 insertions(+), 23 deletions(-)
 create mode 100644 redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx

diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx
new file mode 100644
index 0000000000..340910bcc5
--- /dev/null
+++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx
@@ -0,0 +1,155 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+import { Row } from 'uiSrc/components/base/layout/flex'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor'
+import { IconButton } from 'uiSrc/components/base/forms/buttons'
+import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons'
+
+interface ContainerProps {
+  className?: string
+  children?: React.ReactNode
+}
+
+const RefStyledContainer = React.forwardRef(
+  (
+    { className, children }: ContainerProps,
+    ref?: React.Ref<HTMLDivElement>,
+  ) => (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  ),
+)
+
+export const StyledContainer = styled(RefStyledContainer)`
+  max-width: 100%;
+
+  :global(.euiFormControlLayout) {
+    max-width: 100% !important;
+  }
+`
+
+export const IIEContainer = React.forwardRef<
+  HTMLDivElement,
+  {
+    children?: React.ReactNode
+  }
+>(({ children, ...rest }, ref) => (
+  <StyledContainer ref={ref} {...rest}>
+    {children}
+  </StyledContainer>
+))
+
+type ActionsContainerProps = React.ComponentProps<typeof Row> & {
+  $position?: Props['controlsPosition']
+  $design?: Props['controlsDesign']
+}
+
+export const DeclineButton = styled(IconButton).attrs({
+  icon: CancelSlimIcon,
+  'aria-label': 'Cancel editing',
+})`
+  width: 50%;
+  height: 100%;
+
+  &:hover {
+    color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.text.danger500};
+  }
+`
+
+export const ApplyButton = styled(IconButton).attrs({
+  icon: CheckThinIcon,
+  color: 'primary',
+  'aria-label': 'Apply',
+})`
+  height: 100% !important;
+  width: 100% !important;
+
+  &:hover:not([class*='isDisabled']) {
+    color: ${({ theme }: { theme: Theme }) =>
+      theme.semantic.color.text.neutral500};
+  }
+`
+
+const positions = {
+  bottom: css`
+    top: 100%;
+    right: 0;
+    border-radius: 0 0 10px 10px;
+    box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
+  `,
+  top: css`
+    bottom: 100%;
+    right: 0;
+    border-radius: 10px 10px 0 0;
+    box-shadow: 0 -3px 3px var(--controlsBoxShadowColor);
+  `,
+  right: css`
+    top: 0;
+    left: 100%;
+    border-radius: 0 10px 10px 0;
+    box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
+  `,
+  left: css`
+    top: 0;
+    right: 100%;
+    border-radius: 10px 0 0 10px;
+    box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
+  `,
+  inside: css`
+    top: calc(100% - 35px);
+    right: 7px;
+    border-radius: 0 10px 10px 0;
+    box-shadow: 0 3px 3px var(--controlsBoxShadowColor);
+  `,
+}
+
+const designs = {
+  default: css``,
+  separate: css`
+    border-radius: 0;
+    box-shadow: none;
+    background-color: inherit !important;
+    text-align: right;
+    width: 60px;
+    z-index: 4;
+
+    .popoverWrapper,
+    ${DeclineButton}, ${ApplyButton} {
+      margin: 6px 3px;
+      height: 24px !important;
+      width: 24px !important;
+    }
+
+    ${ApplyButton} {
+      margin-top: 0;
+    }
+
+    svg {
+      width: 18px !important;
+      height: 18px !important;
+    }
+  `,
+}
+
+export const ActionsContainer = styled(Row)<ActionsContainerProps>`
+  position: absolute;
+  background-color: ${({ theme }: { theme: Theme }) =>
+    theme.semantic.color.background.primary200};
+  width: 80px;
+  height: 33px;
+  padding: ${({ theme }: { theme: Theme }) => theme.core.space.space050};
+
+  z-index: 3;
+  ${({ $position }) => positions[$position || 'inside']}
+  ${({ $design }) => designs[$design || 'default']}
+
+  .tooltip,
+  .declineBtn,
+  .popoverWrapper {
+    width: 50% !important;
+    height: 100% !important;
+  }
+`
diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
index 3559323840..e2624e92b0 100644
--- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
+++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
@@ -1,5 +1,4 @@
 import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
-import { capitalize } from 'lodash'
 import cx from 'classnames'
 import { EuiFieldText } from '@elastic/eui'
 
@@ -9,12 +8,14 @@ import { FlexItem } from 'uiSrc/components/base/layout/flex'
 import { WindowEvent } from 'uiSrc/components/base/utils/WindowEvent'
 import { FocusTrap } from 'uiSrc/components/base/utils/FocusTrap'
 import { OutsideClickDetector } from 'uiSrc/components/base/utils'
-import { CancelSlimIcon, CheckThinIcon } from 'uiSrc/components/base/icons'
-import {
-  DestructiveButton,
-  IconButton,
-} from 'uiSrc/components/base/forms/buttons'
+import { DestructiveButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
+import {
+  ActionsContainer,
+  ApplyButton,
+  DeclineButton,
+  IIEContainer,
+} from './InlineItemEditor.styles'
 
 import styles from './styles.module.scss'
 
@@ -176,12 +177,8 @@ const InlineItemEditor = (props: Props) => {
       }
       data-testid="apply-tooltip"
     >
-      <IconButton
+      <ApplyButton
         size={iconSize ?? 'M'}
-        icon={CheckThinIcon}
-        color="primary"
-        aria-label="Apply"
-        className={cx(styles.btn, styles.applyBtn)}
         disabled={isDisabledApply()}
         onClick={handleApplyClick}
         data-testid="apply-btn"
@@ -195,7 +192,7 @@ const InlineItemEditor = (props: Props) => {
         children
       ) : (
         <OutsideClickDetector onOutsideClick={handleClickOutside}>
-          <div ref={containerEl} className={styles.container}>
+          <IIEContainer ref={containerEl}>
             <WindowEvent event="keydown" handler={handleOnEsc} />
             <FocusTrap disabled={disableFocusTrap}>
               <form
@@ -229,20 +226,18 @@ const InlineItemEditor = (props: Props) => {
                     </>
                   )}
                 </FlexItem>
-                <div
+                <ActionsContainer
+                  $position={controlsPosition}
+                  $design={controlsDesign}
+                  grow={false}
                   className={cx(
                     'inlineItemEditor__controls',
                     styles.controls,
-                    styles[`controls${capitalize(controlsPosition)}`],
-                    styles[`controls${capitalize(controlsDesign)}`],
                     controlsClassName,
                   )}
                 >
-                  <IconButton
+                  <DeclineButton
                     size={iconSize ?? 'M'}
-                    icon={CancelSlimIcon}
-                    aria-label="Cancel editing"
-                    className={cx(styles.btn, styles.declineBtn)}
                     onClick={onDecline}
                     disabled={isLoading}
                     data-testid="cancel-btn"
@@ -289,10 +284,10 @@ const InlineItemEditor = (props: Props) => {
                       </div>
                     </RiPopover>
                   )}
-                </div>
+                </ActionsContainer>
               </form>
             </FocusTrap>
-          </div>
+          </IIEContainer>
         </OutsideClickDetector>
       )}
     </>
diff --git a/redisinsight/ui/src/components/settings-item/SettingItem.tsx b/redisinsight/ui/src/components/settings-item/SettingItem.tsx
index c54aa02a94..c72aa1d42b 100644
--- a/redisinsight/ui/src/components/settings-item/SettingItem.tsx
+++ b/redisinsight/ui/src/components/settings-item/SettingItem.tsx
@@ -74,8 +74,8 @@ const SettingItem = (props: Props) => {
         </FlexItem>
 
         <FlexItem
-          onMouseEnter={() => setHovering(true)}
-          onMouseLeave={() => setHovering(false)}
+          onMouseEnter={() => !isEditing && setHovering(true)}
+          onMouseLeave={() => !isEditing && setHovering(false)}
           onClick={() => setEditing(true)}
           style={{ width: '200px' }}
         >

From 283483a3070f77f8544dc02bbc9fb7795e70dd78 Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Fri, 1 Aug 2025 12:03:47 +0300
Subject: [PATCH 3/4] fixing styles for InlineItemEditor.tsx 3

---
 .../components/auto-refresh/AutoRefresh.tsx   |   4 +-
 .../auto-refresh/styles.module.scss           |   5 +-
 .../InlineItemEditor.styles.tsx               |  29 +++--
 .../inline-item-editor/InlineItemEditor.tsx   | 103 ++++++++++--------
 .../inline-item-editor/styles.module.scss     |   8 --
 .../instance-header/styles.module.scss        |   4 +
 .../settings-item/styles.module.scss          |   5 +-
 7 files changed, 87 insertions(+), 71 deletions(-)

diff --git a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx
index 831c79545b..7598a7a19b 100644
--- a/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx
+++ b/redisinsight/ui/src/components/auto-refresh/AutoRefresh.tsx
@@ -250,7 +250,9 @@ const AutoRefresh = ({
         anchorPosition="downRight"
         isOpen={isPopoverOpen}
         anchorClassName={styles.anchorWrapper}
-        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper)}
+        panelClassName={cx('popover-without-top-tail', styles.popoverWrapper, {
+          [styles.popoverWrapperEditing]: editingRate,
+        })}
         closePopover={closePopover}
         button={
           <IconButton
diff --git a/redisinsight/ui/src/components/auto-refresh/styles.module.scss b/redisinsight/ui/src/components/auto-refresh/styles.module.scss
index 684a15b077..b91535a948 100644
--- a/redisinsight/ui/src/components/auto-refresh/styles.module.scss
+++ b/redisinsight/ui/src/components/auto-refresh/styles.module.scss
@@ -61,11 +61,14 @@
 
     input {
       height: 30px !important;
-      border-radius: 0px !important;
+      border-radius: 0 !important;
       background-color: var(--euiColorLightestShade) !important;
     }
   }
 }
+.popoverWrapperEditing {
+  height: 140px;
+}
 
 .inputContainer {
   height: 30px;
diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx
index 340910bcc5..7f45ad145e 100644
--- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx
+++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.styles.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
-import { Row } from 'uiSrc/components/base/layout/flex'
+import { FlexItem, Row } from 'uiSrc/components/base/layout/flex'
 import { Theme } from 'uiSrc/components/base/theme/types'
 import { Props } from 'uiSrc/components/inline-item-editor/InlineItemEditor'
 import { IconButton } from 'uiSrc/components/base/forms/buttons'
@@ -25,9 +25,13 @@ const RefStyledContainer = React.forwardRef(
 export const StyledContainer = styled(RefStyledContainer)`
   max-width: 100%;
 
-  :global(.euiFormControlLayout) {
+  & .euiFormControlLayout {
     max-width: 100% !important;
   }
+
+  & .tooltip {
+    display: inline-block;
+  }
 `
 
 export const IIEContainer = React.forwardRef<
@@ -50,9 +54,6 @@ export const DeclineButton = styled(IconButton).attrs({
   icon: CancelSlimIcon,
   'aria-label': 'Cancel editing',
 })`
-  width: 50%;
-  height: 100%;
-
   &:hover {
     color: ${({ theme }: { theme: Theme }) =>
       theme.semantic.color.text.danger500};
@@ -64,9 +65,7 @@ export const ApplyButton = styled(IconButton).attrs({
   color: 'primary',
   'aria-label': 'Apply',
 })`
-  height: 100% !important;
-  width: 100% !important;
-
+  vertical-align: initial;
   &:hover:not([class*='isDisabled']) {
     color: ${({ theme }: { theme: Theme }) =>
       theme.semantic.color.text.neutral500};
@@ -134,6 +133,13 @@ const designs = {
   `,
 }
 
+export const ActionsWrapper = styled(FlexItem)<{
+  $size?: { width: string; height: string }
+}>`
+  width: ${({ $size }) => $size?.width ?? '24px'} !important;
+  height: ${({ $size }) => $size?.height ?? '24px'} !important;
+`
+
 export const ActionsContainer = styled(Row)<ActionsContainerProps>`
   position: absolute;
   background-color: ${({ theme }: { theme: Theme }) =>
@@ -145,11 +151,4 @@ export const ActionsContainer = styled(Row)<ActionsContainerProps>`
   z-index: 3;
   ${({ $position }) => positions[$position || 'inside']}
   ${({ $design }) => designs[$design || 'default']}
-
-  .tooltip,
-  .declineBtn,
-  .popoverWrapper {
-    width: 50% !important;
-    height: 100% !important;
-  }
 `
diff --git a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
index e2624e92b0..2e5a25062b 100644
--- a/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
+++ b/redisinsight/ui/src/components/inline-item-editor/InlineItemEditor.tsx
@@ -1,5 +1,6 @@
 import React, { ChangeEvent, Ref, useEffect, useRef, useState } from 'react'
 import cx from 'classnames'
+import { useTheme } from '@redis-ui/styles'
 import { EuiFieldText } from '@elastic/eui'
 
 import * as keys from 'uiSrc/constants/keys'
@@ -12,6 +13,7 @@ import { DestructiveButton } from 'uiSrc/components/base/forms/buttons'
 import { Text } from 'uiSrc/components/base/text'
 import {
   ActionsContainer,
+  ActionsWrapper,
   ApplyButton,
   DeclineButton,
   IIEContainer,
@@ -92,6 +94,9 @@ const InlineItemEditor = (props: Props) => {
   const [value, setValue] = useState<string>(initialValue)
   const [isError, setIsError] = useState<boolean>(false)
   const [isShowApprovePopover, setIsShowApprovePopover] = useState(false)
+  const theme = useTheme()
+
+  const size = theme.components.iconButton.sizes[iconSize ?? 'M']
 
   const inputRef: Ref<HTMLInputElement> = useRef(null)
 
@@ -165,7 +170,7 @@ const InlineItemEditor = (props: Props) => {
 
   const ApplyBtn = (
     <RiTooltip
-      anchorClassName={styles.tooltip}
+      anchorClassName={cx(styles.tooltip, 'tooltip')}
       position="bottom"
       title={
         (isDisabled && disabledTooltipText?.title) ||
@@ -227,6 +232,8 @@ const InlineItemEditor = (props: Props) => {
                   )}
                 </FlexItem>
                 <ActionsContainer
+                  justify="around"
+                  gap="m"
                   $position={controlsPosition}
                   $design={controlsDesign}
                   grow={false}
@@ -236,53 +243,61 @@ const InlineItemEditor = (props: Props) => {
                     controlsClassName,
                   )}
                 >
-                  <DeclineButton
-                    size={iconSize ?? 'M'}
-                    onClick={onDecline}
-                    disabled={isLoading}
-                    data-testid="cancel-btn"
-                  />
-                  {!approveByValidation && ApplyBtn}
+                  <ActionsWrapper $size={size}>
+                    <DeclineButton
+                      onClick={onDecline}
+                      disabled={isLoading}
+                      data-testid="cancel-btn"
+                    />
+                  </ActionsWrapper>
+                  {!approveByValidation && (
+                    <ActionsWrapper $size={size}>{ApplyBtn}</ActionsWrapper>
+                  )}
                   {approveByValidation && (
-                    <RiPopover
-                      anchorPosition="leftCenter"
-                      isOpen={isShowApprovePopover}
-                      closePopover={() => setIsShowApprovePopover(false)}
-                      anchorClassName={styles.popoverAnchor}
-                      panelClassName={cx(styles.popoverPanel)}
-                      button={ApplyBtn}
-                    >
-                      <div
-                        className={styles.popover}
-                        data-testid="approve-popover"
+                    <ActionsWrapper $size={size}>
+                      <RiPopover
+                        anchorPosition="leftCenter"
+                        isOpen={isShowApprovePopover}
+                        closePopover={() => setIsShowApprovePopover(false)}
+                        anchorClassName={cx(
+                          styles.popoverAnchor,
+                          'popoverAnchor',
+                        )}
+                        panelClassName={cx(styles.popoverPanel)}
+                        button={ApplyBtn}
                       >
-                        <Text size="m" component="div">
-                          {!!approveText?.title && (
-                            <h4>
-                              <b>{approveText?.title}</b>
-                            </h4>
-                          )}
-                          <Text
-                            size="s"
-                            color="subdued"
-                            className={styles.approveText}
-                          >
-                            {approveText?.text}
+                        <div
+                          className={styles.popover}
+                          data-testid="approve-popover"
+                        >
+                          <Text size="m" component="div">
+                            {!!approveText?.title && (
+                              <h4>
+                                <b>{approveText?.title}</b>
+                              </h4>
+                            )}
+                            <Text
+                              size="s"
+                              color="subdued"
+                              className={styles.approveText}
+                            >
+                              {approveText?.text}
+                            </Text>
                           </Text>
-                        </Text>
-                        <div className={styles.popoverFooter}>
-                          <DestructiveButton
-                            aria-label="Save"
-                            className={cx(styles.btn, styles.saveBtn)}
-                            disabled={isDisabledApply()}
-                            onClick={handleFormSubmit}
-                            data-testid="save-btn"
-                          >
-                            Save
-                          </DestructiveButton>
+                          <div className={styles.popoverFooter}>
+                            <DestructiveButton
+                              aria-label="Save"
+                              className={cx(styles.btn, styles.saveBtn)}
+                              disabled={isDisabledApply()}
+                              onClick={handleFormSubmit}
+                              data-testid="save-btn"
+                            >
+                              Save
+                            </DestructiveButton>
+                          </div>
                         </div>
-                      </div>
-                    </RiPopover>
+                      </RiPopover>
+                    </ActionsWrapper>
                   )}
                 </ActionsContainer>
               </form>
diff --git a/redisinsight/ui/src/components/inline-item-editor/styles.module.scss b/redisinsight/ui/src/components/inline-item-editor/styles.module.scss
index 2657157e40..3287b9b47c 100644
--- a/redisinsight/ui/src/components/inline-item-editor/styles.module.scss
+++ b/redisinsight/ui/src/components/inline-item-editor/styles.module.scss
@@ -15,15 +15,7 @@
 }
 
 .controls {
-  position: absolute;
-  background-color: var(--euiColorLightestShade);
-  width: 80px;
-  height: 33px;
-
-  z-index: 3;
-
   .tooltip,
-  .declineBtn,
   .popoverWrapper {
     width: 50% !important;
     height: 100% !important;
diff --git a/redisinsight/ui/src/components/instance-header/styles.module.scss b/redisinsight/ui/src/components/instance-header/styles.module.scss
index 7f5aad114e..5f1605a53d 100644
--- a/redisinsight/ui/src/components/instance-header/styles.module.scss
+++ b/redisinsight/ui/src/components/instance-header/styles.module.scss
@@ -69,6 +69,10 @@
 
 .dbIndexInput {
   width: 60px !important;
+  height: 32px !important;
+  border-color: transparent !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: 0 !important;
 }
 
 .divider {
diff --git a/redisinsight/ui/src/components/settings-item/styles.module.scss b/redisinsight/ui/src/components/settings-item/styles.module.scss
index e57002271c..7b9f693261 100644
--- a/redisinsight/ui/src/components/settings-item/styles.module.scss
+++ b/redisinsight/ui/src/components/settings-item/styles.module.scss
@@ -1,6 +1,8 @@
 .input {
   height: 31px !important;
   font-family: 'Graphik', sans-serif !important;
+  border-bottom-right-radius: 0 !important;
+  border-top-right-radius: 0 !important;
 }
 
 .inputEditing {
@@ -13,8 +15,7 @@
   align-items: center;
   justify-content: space-between;
   padding-left: 10px;
-  padding-bottom: 5px;
-  
+
   & > * {
     line-height: 3.1rem !important;
   }

From a83d630c621b4b8c2df1e98209198c846c153f48 Mon Sep 17 00:00:00 2001
From: pd-redis <petar.dzhambazov@redis.com>
Date: Fri, 1 Aug 2025 15:21:54 +0300
Subject: [PATCH 4/4] Link wraps a span, that has underline style ....

---
 redisinsight/ui/src/components/base/link/link.styles.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/components/base/link/link.styles.ts b/redisinsight/ui/src/components/base/link/link.styles.ts
index 6ac23139e4..f7bf116c45 100644
--- a/redisinsight/ui/src/components/base/link/link.styles.ts
+++ b/redisinsight/ui/src/components/base/link/link.styles.ts
@@ -66,7 +66,9 @@ export const useColorTextStyles = ({ $color }: MapProps = {}) => {
 export const StyledLink = styled(RedisUiLink)<MapProps>`
   ${useColorTextStyles};
   text-decoration: none !important;
-
+  & > span {
+    text-decoration: none !important;
+  }
   &:hover {
     text-decoration: underline !important;
   }