Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve layout and truncate document information in logs page (#1656)

Browse Source
This commit is contained in:
Jenil Savani
2025-03-12 10:59:48 +05:30
committed by David Nguyen
parent 7214965c0c
commit 44cdbeecb4
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/remix/app/routes/_authenticated+/documents.$id.logs.tsx
View File

@ -129,7 +129,7 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
<Trans>Document</Trans> <Trans>Document</Trans>
</Link> </Link>
<div className="flex flex-col justify-between truncate sm:flex-row"> <div className="flex flex-col">
<div> <div>
<h1 <h1
className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl" className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
@ -137,7 +137,8 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
> >
{document.title} {document.title}
</h1> </h1>
</div>
<div className="mt-1 flex flex-col justify-between sm:flex-row">
<div className="mt-2.5 flex items-center gap-x-6"> <div className="mt-2.5 flex items-center gap-x-6">
<DocumentStatusComponent <DocumentStatusComponent
inheritColor inheritColor
@ -145,8 +146,6 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
className="text-muted-foreground" className="text-muted-foreground"
/> />
</div> </div>
</div>
<div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end"> <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
<DocumentCertificateDownloadButton <DocumentCertificateDownloadButton
className="mr-2" className="mr-2"
@ -157,13 +156,14 @@ export default function DocumentsLogsPage({ loaderData }: Route.ComponentProps)
<DocumentAuditLogDownloadButton documentId={document.id} /> <DocumentAuditLogDownloadButton documentId={document.id} />
</div> </div>
</div> </div>
</div>
<section className="mt-6"> <section className="mt-6">
<Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient> <Card className="grid grid-cols-1 gap-4 p-4 sm:grid-cols-2" degrees={45} gradient>
{documentInformation.map((info, i) => ( {documentInformation.map((info, i) => (
<div className="text-foreground text-sm" key={i}> <div className="text-foreground text-sm" key={i}>
<h3 className="font-semibold">{_(info.description)}</h3> <h3 className="font-semibold">{_(info.description)}</h3>
<p className="text-muted-foreground">{info.value}</p> <p className="text-muted-foreground truncate">{info.value}</p>
</div> </div>
))} ))}