fix(web): tooltip text wrapping (#365)

This commit is contained in:
stacksmash76 2022-07-21 22:02:43 +02:00 committed by GitHub
parent c0f1037af0
commit 497140a6c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 4 deletions

View file

@ -71,7 +71,15 @@ export const ReleaseStatusCell = ({ value }: ReleaseStatusCellProps) => (
{v.client && <li className="py-1">Client: {v.client}</li>}
{v.filter && <li className="py-1">Filter: {v.filter}</li>}
<li className="py-1">Time: {simplifyDate(v.timestamp)}</li>
{v.rejections.length > 0 && <li className="py-1">Rejections: <span className="break-all">{v.rejections.toString()}</span></li>}
{v.rejections.length ? (
<li className="py-1">
Rejections:
{" "}
<p className="whitespace-pre-wrap break-all">
{v.rejections.toString()}
</p>
</li>
) : null}
</ol>
</Tooltip>
</div>

View file

@ -6,9 +6,10 @@ export const Tooltip = ({ children, button } : {
return (
<div className="relative flex flex-col items-center group">
{button}
<div className="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
<span className="relative z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">{children}</span>
<div className="w-3 h-3 -mt-2 rotate-45 bg-gray-600"></div>
<div className="absolute bottom-0 flex-col items-center hidden mb-6 group-hover:flex">
<span className="z-40 p-2 text-xs leading-none text-white whitespace-no-wrap bg-gray-600 shadow-lg rounded-md">
{children}
</span>
</div>
</div>
);