From b89f382e65e3e83be1289bd36250307640d35c0a Mon Sep 17 00:00:00 2001
From: Anup Cowkur <anupcowkur89@gmail.com>
Date: Wed, 11 Sep 2024 19:33:53 +0530
Subject: [PATCH] chore(frontend): fix table column widths and move paginator
 to top right

closes #1167
---
 .../dashboard/app/[teamId]/sessions/page.tsx  | 12 +++----
 .../app/components/exceptions_overview.tsx    | 34 ++++++++++---------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/frontend/dashboard/app/[teamId]/sessions/page.tsx b/frontend/dashboard/app/[teamId]/sessions/page.tsx
index d214c3b93..790e30fb6 100644
--- a/frontend/dashboard/app/[teamId]/sessions/page.tsx
+++ b/frontend/dashboard/app/[teamId]/sessions/page.tsx
@@ -140,29 +140,29 @@ export default function SessionsOverview({ params }: { params: { teamId: string
                             }} />
                     </div>
                     <div className="py-1" />
-                    <div className="table border border-black rounded-md w-full">
+                    <div className="table border border-black rounded-md w-full" style={{ tableLayout: "fixed" }}>
                         <div className="table-header-group bg-neutral-950">
                             <div className="table-row text-white font-display">
                                 <div className="table-cell w-96 p-4">Session Id</div>
-                                <div className="table-cell w-56 py-4 px-2 text-center">Start Time</div>
-                                <div className="table-cell w-56 p-4 text-center">Duration</div>
+                                <div className="table-cell w-48 p-4 text-center">Start Time</div>
+                                <div className="table-cell w-48 p-4 text-center">Duration</div>
                             </div>
                         </div>
                         <div className="table-row-group font-sans">
                             {sessionsOverview.results.map(({ session_id, app_id, first_event_time, duration, matched_free_text, attribute }) => (
                                 <Link key={session_id} href={`/${params.teamId}/sessions/${app_id}/${session_id}`} className="table-row border-b-2 border-black hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300 ">
-                                    <div className="table-cell w-96 p-4">
+                                    <div className="table-cell p-4">
                                         <p className='truncate'>{session_id}</p>
                                         <div className='py-1' />
                                         <p className='text-xs truncate text-gray-500'>{"v" + attribute.app_version + "(" + attribute.app_build + "), " + attribute.os_name + " " + attribute.os_version + ", " + attribute.device_manufacturer + " " + attribute.device_model}</p>
                                         {matched_free_text !== "" && <p className='p-1 mt-2 w-fit text-xs truncate border border-black rounded-md '>{"Matched " + matched_free_text}</p>}
                                     </div>
-                                    <div className="table-cell w-48 p-4 text-center">
+                                    <div className="table-cell p-4 text-center">
                                         <p className='truncate'>{formatDateToHumanReadableDate(first_event_time)}</p>
                                         <div className='py-1' />
                                         <p className='text-xs truncate'>{formatDateToHumanReadableTime(first_event_time)}</p>
                                     </div>
-                                    <div className="table-cell w-48 p-4 truncate text-center">{(duration as unknown as number) === 0 ? 'N/A' : formatMillisToHumanReadable(duration as unknown as number)}</div>
+                                    <div className="table-cell p-4 text-center truncate">{(duration as unknown as number) === 0 ? 'N/A' : formatMillisToHumanReadable(duration as unknown as number)}</div>
                                 </Link>
                             ))}
                         </div>
diff --git a/frontend/dashboard/app/components/exceptions_overview.tsx b/frontend/dashboard/app/components/exceptions_overview.tsx
index 70744211f..e8aea98a2 100644
--- a/frontend/dashboard/app/components/exceptions_overview.tsx
+++ b/frontend/dashboard/app/components/exceptions_overview.tsx
@@ -123,19 +123,31 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
             startDate={selectedFilters.selectedStartDate}
             endDate={selectedFilters.selectedEndDate}
             appVersions={selectedFilters.selectedVersions} />
-          <div className="py-8" />
-          <div className="table border border-black rounded-md w-full">
+          <div className="py-4" />
+          <div className='self-end'>
+            <Paginator prevEnabled={exceptionsOverview.meta.previous} nextEnabled={exceptionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
+              onNext={() => {
+                setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
+                setPaginationDirection(PaginationDirection.Forward)
+              }}
+              onPrev={() => {
+                setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
+                setPaginationDirection(PaginationDirection.Backward)
+              }} />
+          </div>
+          <div className="py-1" />
+          <div className="table border border-black rounded-md w-full" style={{ tableLayout: "fixed" }}>
             <div className="table-header-group bg-neutral-950">
               <div className="table-row text-white font-display">
-                <div className="table-cell p-4 py-4">{exceptionsType === ExceptionsType.Crash ? 'Crash' : 'ANR'} Name</div>
-                <div className="table-cell p-4 py-4">Instances</div>
-                <div className="table-cell p-4 py-4">Percentage contribution</div>
+                <div className="table-cell w-96 p-4">{exceptionsType === ExceptionsType.Crash ? 'Crash' : 'ANR'} Name</div>
+                <div className="table-cell w-48 p-4 text-center">Instances</div>
+                <div className="table-cell w-48 p-4 text-center">Percentage contribution</div>
               </div>
             </div>
             <div className="table-row-group font-sans">
               {exceptionsOverview.results.map(({ id, type, message, method_name, file_name, line_number, count, percentage_contribution }) => (
                 <Link key={id} href={`/${teamId}/${exceptionsType === ExceptionsType.Crash ? 'crashes' : 'anrs'}/${selectedFilters.selectedApp.id}/${id}/${type + "@" + file_name}`} className="table-row border-b-2 border-black hover:bg-yellow-200 focus:bg-yellow-200 active:bg-yellow-300 ">
-                  <div className="table-cell p-4 max-w-2xl">
+                  <div className="table-cell p-4">
                     <p className='truncate'>{file_name + ": " + method_name + "()"}</p>
                     <div className='py-1' />
                     <p className='text-xs truncate text-gray-500'>{type + ":" + message}</p>
@@ -146,16 +158,6 @@ export const ExceptionsOverview: React.FC<ExceptionsOverviewProps> = ({ exceptio
               ))}
             </div>
           </div>
-          <div className="py-2" />
-          <Paginator prevEnabled={exceptionsOverview.meta.previous} nextEnabled={exceptionsOverview.meta.next} displayText={paginationRange.start + ' - ' + paginationRange.end}
-            onNext={() => {
-              setPaginationRange({ start: paginationRange.start + paginationOffset, end: paginationRange.end + paginationOffset })
-              setPaginationDirection(PaginationDirection.Forward)
-            }}
-            onPrev={() => {
-              setPaginationRange({ start: paginationRange.start - paginationOffset, end: paginationRange.end - paginationOffset })
-              setPaginationDirection(PaginationDirection.Backward)
-            }} />
         </div>}
     </div>
   )