fix: [M3-7722] - Adjust EditableText styling to prevent pixel shift (#…

…10132) * Adjust EditableText styling * Added changeset: EditableText interaction styling
linode · Jan 31, 2024 · dea5d57 · dea5d57
1 parent ca489da
commit dea5d57
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/manager/.changeset/pr-10132-fixed-1706715510568.md b/packages/manager/.changeset/pr-10132-fixed-1706715510568.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Fixed
+---
+
+EditableText interaction styling ([#10132](https://github.com/linode/manager/pull/10132))
diff --git a/packages/manager/src/components/EditableText/EditableText.tsx b/packages/manager/src/components/EditableText/EditableText.tsx
@@ -9,7 +9,6 @@ import { makeStyles } from 'tss-react/mui';
 import { Button } from 'src/components/Button/Button';
 import { ClickAwayListener } from 'src/components/ClickAwayListener';
 import { H1Header } from 'src/components/H1Header/H1Header';
-import { fadeIn } from 'src/styles/keyframes';
 
 import { TextField, TextFieldProps } from '../TextField';
 
@@ -63,7 +62,7 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
           color: theme.color.grey1,
         },
       },
-      border: '1px solid transparent',
+      borderLeft: '1px solid transparent',
     },
     input: {
       fontFamily: theme.font.bold,
@@ -92,7 +91,6 @@ const useStyles = makeStyles<void, 'editIcon' | 'icon'>()(
       wordBreak: 'break-all',
     },
     textField: {
-      animation: `${fadeIn} .3s ease-in-out forwards`,
       margin: 0,
     },
     underlineOnHover: {