awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3724 from Infisical/fix/secretRequestUIOverflows

Browse Source 
Fix broken UI for secret requests due to long secret values
This commit is contained in:
Akhil Mohan
2025-06-04 21:08:03 +05:30
committed by GitHub
parent 01ea22f167 caca23b56c
commit 5d5f843a9f
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
View File

@@ -106,10 +106,10 @@ export const SecretApprovalRequestChangeItem = ({
) : ( ) : (
<div <div
onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)} onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2" className="relative flex max-w-[100vh] flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 px-2"
> >
<div <div
className={`flex font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`} className={`flex break-all font-mono ${isOldSecretValueVisible || !secretVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
> >
{isOldSecretValueVisible {isOldSecretValueVisible
? secretVersion?.secretValue || "EMPTY" ? secretVersion?.secretValue || "EMPTY"
@@ -118,7 +118,7 @@ export const SecretApprovalRequestChangeItem = ({
: "EMPTY"}{" "} : "EMPTY"}{" "}
</div> </div>
{secretVersion?.secretValue && ( {secretVersion?.secretValue && (
<div className="flex h-10 w-10 items-center justify-center"> <div className="flex h-10 w-10 items-center justify-center pl-1">
<FontAwesomeIcon <FontAwesomeIcon
icon={isOldSecretValueVisible ? faEyeSlash : faEye} icon={isOldSecretValueVisible ? faEyeSlash : faEye}
className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700" className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
@@ -131,7 +131,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="text-sm"> <div className="max-h-[5rem] overflow-y-auto text-sm">
{secretVersion?.secretComment || ( {secretVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span> <span className="text-sm text-mineshaft-300">-</span>
)}{" "} )}{" "}
@@ -218,10 +218,10 @@ export const SecretApprovalRequestChangeItem = ({
) : ( ) : (
<div <div
onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)} onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
className="flex flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 pl-2" className="relative flex max-w-[100vh] flex-row items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-900 px-2"
> >
<div <div
className={`flex font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`} className={`flex break-all font-mono ${isNewSecretValueVisible || !newVersion?.secretValue ? "text-md py-[0.55rem]" : "text-lg"}`}
> >
{isNewSecretValueVisible {isNewSecretValueVisible
? newVersion?.secretValue || "EMPTY" ? newVersion?.secretValue || "EMPTY"
@@ -230,7 +230,7 @@ export const SecretApprovalRequestChangeItem = ({
: "EMPTY"}{" "} : "EMPTY"}{" "}
</div> </div>
{newVersion?.secretValue && ( {newVersion?.secretValue && (
<div className="flex h-10 w-10 items-center justify-center"> <div className="flex h-10 w-10 items-center justify-center pl-1">
<FontAwesomeIcon <FontAwesomeIcon
icon={isNewSecretValueVisible ? faEyeSlash : faEye} icon={isNewSecretValueVisible ? faEyeSlash : faEye}
className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700" className="cursor-pointer rounded-md border border-mineshaft-500 bg-mineshaft-800 p-1.5 text-mineshaft-300 hover:bg-mineshaft-700"
@@ -243,7 +243,7 @@ export const SecretApprovalRequestChangeItem = ({
</div> </div>
<div className="mb-2"> <div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div> <div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="text-sm"> <div className="max-h-[5rem] overflow-y-auto text-sm">
{newVersion?.secretComment || ( {newVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span> <span className="text-sm text-mineshaft-300">-</span>
)}{" "} )}{" "}