I added a wrapper div with a class of relative to make the icon and tooltip align vertically inline.

This commit is contained in:
isaiahmartin847
2025-01-27 12:25:38 -07:00
parent 1181c684db
commit 8062f0238b
@@ -189,6 +189,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }}
>
<div className="relative">
<Tooltip content="Copy secret name">
<IconButton
ariaLabel="copy-value"
@@ -200,6 +201,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
<FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
</IconButton>
</Tooltip>
</div>
</motion.div>
) : (
<motion.div
@@ -209,6 +211,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }}
>
<div className="relative">
<Tooltip content={errors.key ? errors.key.message : "Save"}>
<IconButton
ariaLabel="more"
@@ -232,6 +235,8 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
)}
</IconButton>
</Tooltip>
</div>
<div className="relative">
<Tooltip content="Cancel">
<IconButton
ariaLabel="more"
@@ -247,6 +252,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
<FontAwesomeIcon icon={faClose} size="lg" />
</IconButton>
</Tooltip>
</div>
</motion.div>
)}
</AnimatePresence>