fix(ui): update ttl input placement in key details header

re #RI-7602

Author: valkirilov

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/KeyDetailsHeaderTTL.tsx

@@ -96,12 +96,15 @@ const KeyDetailsHeaderTTL = ({ onEditTTL }: Props) => {
           <Grid
             columns={2}
             responsive={false}
-            gap="none"
+            gap="s"
             className={styles.ttlGridComponent}
             data-testid="edit-ttl-grid"
           >
             <FlexItem>
-              <Text size="s" className={styles.subtitleText}>
+              <Text
+                size="s"
+                className={cx(styles.subtitleText, styles.subtitleTextTTL)}
+              >
                 TTL:
               </Text>
             </FlexItem>
@@ -139,7 +142,7 @@ const KeyDetailsHeaderTTL = ({ onEditTTL }: Props) => {
         )}
         <Text
           size="s"
-          className={cx(styles.subtitleText, {
+          className={cx(styles.subtitleText, styles.subtitleTextTTL, {
             [styles.hidden]: ttlIsEditing || ttlIsHovering,
           })}
           data-testid="key-ttl-text"

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-ttl/styles.module.scss

@@ -2,6 +2,12 @@
   padding: 6px 2px 6px 0;
 }
 
+.subtitleTextTTL {
+  height: 26px;
+  line-height: 26px;
+  padding: 0;
+}
+
 .controlsKey {
   right: 25px;
 }
@@ -21,21 +27,27 @@
 
 .ttlInput {
   min-width: 106px;
-  font-size: 13px !important;
-  height: 25px !important;
+  font-size: 12px !important;
+  height: 24px !important;
+  padding: 2px 0 0 9px !important;
 }
 
 .ttlGridComponent,
 .classNameGridComponent {
   position: relative;
 }
 
+.ttlGridComponent {
+  height: 24px;
+  line-height: 24px;
+}
+
 .hidden {
   display: none;
 }
 
 .ttlTextValue {
-  padding-left: 11px;
+  padding-left: 14px;
 }
 
 @include global.insights-open {