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 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }} exit={{ x: 10, opacity: 0 }}
> >
<div className="relative">
<Tooltip content="Copy secret name"> <Tooltip content="Copy secret name">
<IconButton <IconButton
ariaLabel="copy-value" ariaLabel="copy-value"
@@ -200,6 +201,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
<FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} /> <FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</motion.div> </motion.div>
) : ( ) : (
<motion.div <motion.div
@@ -209,6 +211,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
animate={{ x: 0, opacity: 1 }} animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }} exit={{ x: -10, opacity: 0 }}
> >
<div className="relative">
<Tooltip content={errors.key ? errors.key.message : "Save"}> <Tooltip content={errors.key ? errors.key.message : "Save"}>
<IconButton <IconButton
ariaLabel="more" ariaLabel="more"
@@ -232,6 +235,8 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
)} )}
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
<div className="relative">
<Tooltip content="Cancel"> <Tooltip content="Cancel">
<IconButton <IconButton
ariaLabel="more" ariaLabel="more"
@@ -247,6 +252,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
<FontAwesomeIcon icon={faClose} size="lg" /> <FontAwesomeIcon icon={faClose} size="lg" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>