RI-7540: update key name text input styles (#5011)

* RI-7552: close popover on escape press

* RI-7552: unfocus input on esc press

* RI-7540: update key name text input styles

* RI-7540: grow input field

* use flex item grow

Author: KrumTy

redisinsight/ui/src/pages/browser/modules/key-details-header/components/key-details-header-name/KeyDetailsHeaderName.tsx

@@ -147,15 +147,12 @@ const KeyDetailsHeaderName = ({ onEditKey }: Props) => {
 
   return (
     <FlexItem
-      grow
+      grow={5}
       direction="row"
       onMouseEnter={onMouseEnterKey}
       onMouseLeave={onMouseLeaveKey}
       onClick={onClickKey}
-      className={cx(
-        styles.keyFlexItem, // TODO with styles.keyFlexItemEditing
-        keyIsEditing || keyIsHovering ? styles.keyFlexItemEditing : null,
-      )}
+      $gap="xs"
       data-testid="edit-key-btn"
     >
       {keyIsEditing || keyIsHovering ? (

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

@@ -10,6 +10,7 @@
 .toolTipAnchorKey {
   max-width: 450px;
   height: 31px !important;
+  width: 100%;
 }
 
 .keyInput {
@@ -21,6 +22,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding-right: 6px;
 }
 
 :global(.browserPage .key-details-header .euiFormControlLayout) {