fix(ui) - audit table paddings

frontend/app/components/Client/Audit/AuditList/AuditList.tsx

@@ -44,19 +44,18 @@ function AuditList(props: Props) {
                 size="small"
                 show={list.length === 0}
             >
-                <div className="px-2 grid grid-cols-12 gap-4 items-center py-3 font-medium">
+                <div className="grid grid-cols-12 py-3 px-5 font-medium">
                     <div className="col-span-5">Name</div>
                     <div className="col-span-4">Status</div>
                     <div className="col-span-3">Time</div>
                 </div>
 
                 {list.map((item, index) => (
-                    <div className="px-2 border-t hover:bg-active-blue" key={index}>
-                        <AuditListItem
-                            audit={item}
-                            onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true })}
-                        />
-                    </div>
+                    <AuditListItem
+                        key={index}
+                        audit={item}
+                        onShowDetails={() => showModal(<AuditDetailModal audit={item} />, { right: true })}
+                    />
                 ))}
                 
                 <div className="w-full flex items-center justify-center py-10">

frontend/app/components/Client/Audit/AuditListItem/AuditListItem.tsx

@@ -8,7 +8,7 @@ interface Props {
 function AuditListItem(props: Props) {
     const { audit, onShowDetails } = props;
     return (
-        <div className="grid grid-cols-12 gap-4 items-center py-3">
+        <div className="grid grid-cols-12 py-4 px-5 border-t items-center select-none hover:bg-active-blue group">
             <div className="col-span-5">{audit.username}</div>
             <div className="col-span-4 link cursor-pointer select-none" onClick={onShowDetails}>{audit.action}</div>
             <div className="col-span-3">{audit.createdAt && checkForRecent(audit.createdAt, 'LLL dd, yyyy, hh:mm a')}</div>

frontend/app/components/Client/Audit/AuditView/AuditView.tsx

@@ -23,7 +23,7 @@ function AuditView(props) {
 
     return useObserver(() => (
         <div>
-            <div className="flex items-center mb-4">
+            <div className="flex items-center mb-4 px-5 pt-5">
                 <PageTitle title={
                     <div className="flex items-center">
                         <span>Audit Trail</span>