From 6f39e89d303ad4cf410202c41167f557922927ca Mon Sep 17 00:00:00 2001
From: Jenil Savani <jenilsavani1@gmail.com>
Date: Wed, 12 Mar 2025 10:59:48 +0530
Subject: [PATCH] fix: improve layout and truncate document information in logs
 page (#1656)

---
 .../[id]/logs/document-logs-page-view.tsx     | 26 +++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
index 877dad583..2020536e0 100644
--- a/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
+++ b/apps/web/src/app/(dashboard)/documents/[id]/logs/document-logs-page-view.tsx
@@ -119,7 +119,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
         <Trans>Document</Trans>
       </Link>
 
-      <div className="flex flex-col justify-between truncate sm:flex-row">
+      <div className="flex flex-col">
         <div>
           <h1
             className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
@@ -127,7 +127,8 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
           >
             {document.title}
           </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">
             <DocumentStatusComponent
               inheritColor
@@ -135,17 +136,16 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
               className="text-muted-foreground"
             />
           </div>
-        </div>
+          <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
+            <DownloadCertificateButton
+              className="mr-2"
+              documentId={document.id}
+              documentStatus={document.status}
+              teamId={team?.id}
+            />
 
-        <div className="mt-4 flex w-full flex-row sm:mt-0 sm:w-auto sm:self-end">
-          <DownloadCertificateButton
-            className="mr-2"
-            documentId={document.id}
-            documentStatus={document.status}
-            teamId={team?.id}
-          />
-
-          <DownloadAuditLogButton teamId={team?.id} documentId={document.id} />
+            <DownloadAuditLogButton teamId={team?.id} documentId={document.id} />
+          </div>
         </div>
       </div>
 
@@ -154,7 +154,7 @@ export const DocumentLogsPageView = async ({ params, team }: DocumentLogsPageVie
           {documentInformation.map((info, i) => (
             <div className="text-foreground text-sm" key={i}>
               <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>
           ))}