From 6f7e8e003f24e0c4f239e96d90770f85bfc08e33 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 13 Oct 2025 03:17:28 +0530
Subject: [PATCH 1/4] fix: improve table layout and prevent content overflow in
 LogsTable.

---
 .../[search_space_id]/logs/(manage)/page.tsx  | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index f8a0a593e..6773d2aad 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -839,7 +839,7 @@ function LogsTable({
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ delay: 0.3 }}
 			>
-				<Table>
+				<Table className="table-fixed">
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup: any) => (
 							<TableRow key={headerGroup.id} className="hover:bg-transparent">
@@ -847,7 +847,11 @@ function LogsTable({
 									<TableHead
 										key={header.id}
 										style={{ width: `${header.getSize()}px` }}
-										className="h-12 px-4 py-3"
+										className={cn(
+											"h-12 px-4 py-3",
+											// keep Created At header from wrapping and align it
+											header.column.id === "created_at" ? "whitespace-nowrap text-right" : ""
+										)}
 									>
 										{header.isPlaceholder ? null : header.column.getCanSort() ? (
 											<Button
@@ -895,11 +899,25 @@ function LogsTable({
 											row.getIsSelected() ? "bg-muted/50" : ""
 										)}
 									>
-										{row.getVisibleCells().map((cell: any) => (
-											<TableCell key={cell.id} className="px-4 py-3">
-												{flexRender(cell.column.columnDef.cell, cell.getContext())}
-											</TableCell>
-										))}
+										{row.getVisibleCells().map((cell: any) => {
+											const isCreatedAt = cell.column.id === "created_at";
+											const isMessage = cell.column.id === "message";
+                                             return (
+												<TableCell
+													key={cell.id}
+													// overflow-hidden on cells prevents long content from pushing other columns when using table-fixed
+													className={cn(
+														"px-4 py-3 align-top overflow-hidden",
+														// keep Created At compact and prevent wrapping
+														isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "",
+														// ensure Message cell uses the cell-level clipping (Message markup still has its max-w)
+														isMessage ? "overflow-hidden" : ""
+													)}
+												>
+													{flexRender(cell.column.columnDef.cell, cell.getContext())}
+												</TableCell>
+											);
+                                         })}
 									</motion.tr>
 								))
 							) : (

From b9fc41fd19328ff6aa4816e6d536d806479ffdc6 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 13 Oct 2025 04:30:26 +0530
Subject: [PATCH 2/4] feat: add expandable message rows in LogsTable for better
 readability

---
 .../[search_space_id]/logs/(manage)/page.tsx  | 157 ++++++++++++------
 1 file changed, 107 insertions(+), 50 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index 6773d2aad..fc2105274 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -777,6 +777,12 @@ function LogsTable({
 	onRefresh: () => void;
 	id: string;
 }) {
+	const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
+
+    const toggleRowExpanded = (rowId: string) => {
+        setExpandedRows((prev) => ({ ...prev, [rowId]: !prev[rowId] }));
+    };
+
 	if (loading) {
 		return (
 			<motion.div
@@ -878,56 +884,107 @@ function LogsTable({
 					</TableHeader>
 					<TableBody>
 						<AnimatePresence mode="popLayout">
-							{table.getRowModel().rows?.length ? (
-								table.getRowModel().rows.map((row: any, index: number) => (
-									<motion.tr
-										key={row.id}
-										initial={{ opacity: 0, y: 10 }}
-										animate={{
-											opacity: 1,
-											y: 0,
-											transition: {
-												type: "spring",
-												stiffness: 300,
-												damping: 30,
-												delay: index * 0.03,
-											},
-										}}
-										exit={{ opacity: 0, y: -10 }}
-										className={cn(
-											"border-b transition-colors hover:bg-muted/50",
-											row.getIsSelected() ? "bg-muted/50" : ""
-										)}
-									>
-										{row.getVisibleCells().map((cell: any) => {
-											const isCreatedAt = cell.column.id === "created_at";
-											const isMessage = cell.column.id === "message";
-                                             return (
-												<TableCell
-													key={cell.id}
-													// overflow-hidden on cells prevents long content from pushing other columns when using table-fixed
-													className={cn(
-														"px-4 py-3 align-top overflow-hidden",
-														// keep Created At compact and prevent wrapping
-														isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "",
-														// ensure Message cell uses the cell-level clipping (Message markup still has its max-w)
-														isMessage ? "overflow-hidden" : ""
-													)}
-												>
-													{flexRender(cell.column.columnDef.cell, cell.getContext())}
-												</TableCell>
-											);
-                                         })}
-									</motion.tr>
-								))
-							) : (
-								<TableRow>
-									<TableCell colSpan={columns.length} className="h-24 text-center">
-										No logs found.
-									</TableCell>
-								</TableRow>
-							)}
-						</AnimatePresence>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row: any, index: number) => (
+                                    <motion.tr
+                                        key={row.id}
+                                        initial={{ opacity: 0, y: 10 }}
+                                        animate={{
+                                            opacity: 1,
+                                            y: 0,
+                                            transition: {
+                                                type: "spring",
+                                                stiffness: 300,
+                                                damping: 30,
+                                                delay: index * 0.03,
+                                            },
+                                        }}
+                                        exit={{ opacity: 0, y: -10 }}
+                                        className={cn(
+                                            "border-b transition-colors hover:bg-muted/50",
+                                            row.getIsSelected() ? "bg-muted/50" : ""
+                                        )}
+                                    >
+                                        {row.getVisibleCells().map((cell: any) => {
+                                            const isCreatedAt = cell.column.id === "created_at";
+                                            const isMessage = cell.column.id === "message";
+                                            const isExpanded = Boolean(expandedRows[row.id]);
+
+                                            // If this is the Message column, render custom inline expandable content
+                                            if (isMessage) {
+                                                const message = row.getValue("message") as string;
+                                                const taskName = row.original.log_metadata?.task_name;
+                                                const createdAt = row.getValue("created_at") as string;
+
+                                                return (
+													<TableCell
+														key={cell.id}
+														className={cn(
+															"px-4 py-3 align-top",
+															// allow expanded message to wrap; when collapsed keep clipping so it doesn't push other columns
+															isExpanded ? "whitespace-normal" : "overflow-hidden",
+															// keep Created At behavior unaffected
+															isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : ""
+														)}
+													>
+														{/* Click the preview to toggle expand/collapse */}
+														<button
+															type="button"
+															className={cn(
+																"flex flex-col gap-1 text-left bg-transparent p-0",
+																!isExpanded ? "max-w-[400px]" : ""
+															)}
+															onClick={() => toggleRowExpanded(row.id)}
+															aria-expanded={isExpanded}
+														>
+															{taskName && (
+																<div
+																	className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block max-w-[220px] truncate"
+																	title={taskName}
+																>
+																	{taskName}
+																</div>
+															)}
+
+															{isExpanded ? (
+																/* Expanded: show full message, wrapped, preserve whitespace */
+																<div className="text-sm whitespace-pre-wrap break-words">
+																	{message}
+																</div>
+															) : (
+																/* Collapsed: truncated preview (preserve existing behavior & max-w) */
+																<div className="text-sm truncate" title={message}>
+																	{message.length > 100 ? `${message.substring(0, 100)}...` : message}
+																</div>
+															)}
+														</button>
+													</TableCell>
+                                                );
+                                            }
+
+                                            // Default rendering for other columns
+                                            return (
+                                                <TableCell
+                                                    key={cell.id}
+                                                    className={cn(
+                                                        "px-4 py-3 align-middle overflow-hidden",
+                                                        isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : ""
+                                                    )}
+                                                >
+                                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                                </TableCell>
+                                            );
+                                        })}
+                                    </motion.tr>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell colSpan={columns.length} className="h-24 text-center">
+                                        No logs found.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </AnimatePresence>
 					</TableBody>
 				</Table>
 			</motion.div>

From 19c748bf9756a2c9efc4748670bff5598edac37a Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 13 Oct 2025 21:11:16 +0530
Subject: [PATCH 3/4] feat: implement MessageDetails component for displaying
 log details in a dialog

---
 .../[search_space_id]/logs/(manage)/page.tsx  | 228 +++++++++---------
 1 file changed, 110 insertions(+), 118 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index fc2105274..1d7cae855 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -122,6 +122,55 @@ const logStatusConfig = {
 	FAILED: { icon: X, color: "text-red-600", bgColor: "bg-red-50" },
 } as const;
 
+function MessageDetails({
+    message,
+    taskName,
+    metadata,
+    createdAt,
+    children,
+}: {
+    message: string;
+    taskName?: string;
+    metadata?: any;
+    createdAt?: string;
+    children: React.ReactNode;
+}) {
+    return (
+        <AlertDialog>
+            <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+            <AlertDialogContent className="max-w-3xl w-full">
+                <div className="flex items-start justify-between gap-4">
+                    <div>
+                        <AlertDialogTitle className="text-lg">Log details</AlertDialogTitle>
+                        {createdAt && (
+                            <p className="text-xs text-muted-foreground mt-1">
+                                {new Date(createdAt).toLocaleString()}
+                            </p>
+                        )}
+                    </div>
+                    <div className="shrink-0">
+                        <AlertDialogCancel className="text-sm">Close</AlertDialogCancel>
+                    </div>
+                </div>
+
+                <div className="mt-4 space-y-4">
+                    {taskName && (
+                        <div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block">
+                            {taskName}
+                        </div>
+                    )}
+
+                    <div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap">
+                        {message}
+                    </div>
+                </div>
+
+                <AlertDialogFooter />
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}
+
 const columns: ColumnDef<Log>[] = [
 	{
 		id: "select",
@@ -219,19 +268,22 @@ const columns: ColumnDef<Log>[] = [
 		cell: ({ row }) => {
 			const message = row.getValue("message") as string;
 			const taskName = row.original.log_metadata?.task_name;
+			const createdAt = row.getValue("created_at") as string;
 
 			return (
-				<div className="flex flex-col gap-1 max-w-[400px]">
-					{taskName && (
-						<div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded">
-							{taskName}
-						</div>
-					)}
-					<div className="text-sm">
-						{message.length > 100 ? `${message.substring(0, 100)}...` : message}
-					</div>
-				</div>
-			);
+                <MessageDetails message={message} taskName={taskName} metadata={row.original.log_metadata} createdAt={createdAt}>
+                    <div className="flex flex-col gap-1 max-w-[400px] cursor-pointer">
+                        {taskName && (
+                            <div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate" title={taskName}>
+                                {taskName}
+                            </div>
+                        )}
+                        <div className="text-sm truncate" title={message}>
+                            {message.length > 100 ? `${message.substring(0, 100)}...` : message}
+                        </div>
+                    </div>
+                </MessageDetails>
+            );
 		},
 		size: 400,
 	},
@@ -777,12 +829,6 @@ function LogsTable({
 	onRefresh: () => void;
 	id: string;
 }) {
-	const [expandedRows, setExpandedRows] = useState<Record<string, boolean>>({});
-
-    const toggleRowExpanded = (rowId: string) => {
-        setExpandedRows((prev) => ({ ...prev, [rowId]: !prev[rowId] }));
-    };
-
 	if (loading) {
 		return (
 			<motion.div
@@ -884,107 +930,53 @@ function LogsTable({
 					</TableHeader>
 					<TableBody>
 						<AnimatePresence mode="popLayout">
-                            {table.getRowModel().rows?.length ? (
-                                table.getRowModel().rows.map((row: any, index: number) => (
-                                    <motion.tr
-                                        key={row.id}
-                                        initial={{ opacity: 0, y: 10 }}
-                                        animate={{
-                                            opacity: 1,
-                                            y: 0,
-                                            transition: {
-                                                type: "spring",
-                                                stiffness: 300,
-                                                damping: 30,
-                                                delay: index * 0.03,
-                                            },
-                                        }}
-                                        exit={{ opacity: 0, y: -10 }}
-                                        className={cn(
-                                            "border-b transition-colors hover:bg-muted/50",
-                                            row.getIsSelected() ? "bg-muted/50" : ""
-                                        )}
-                                    >
-                                        {row.getVisibleCells().map((cell: any) => {
-                                            const isCreatedAt = cell.column.id === "created_at";
-                                            const isMessage = cell.column.id === "message";
-                                            const isExpanded = Boolean(expandedRows[row.id]);
-
-                                            // If this is the Message column, render custom inline expandable content
-                                            if (isMessage) {
-                                                const message = row.getValue("message") as string;
-                                                const taskName = row.original.log_metadata?.task_name;
-                                                const createdAt = row.getValue("created_at") as string;
-
-                                                return (
-													<TableCell
-														key={cell.id}
-														className={cn(
-															"px-4 py-3 align-top",
-															// allow expanded message to wrap; when collapsed keep clipping so it doesn't push other columns
-															isExpanded ? "whitespace-normal" : "overflow-hidden",
-															// keep Created At behavior unaffected
-															isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : ""
-														)}
-													>
-														{/* Click the preview to toggle expand/collapse */}
-														<button
-															type="button"
-															className={cn(
-																"flex flex-col gap-1 text-left bg-transparent p-0",
-																!isExpanded ? "max-w-[400px]" : ""
-															)}
-															onClick={() => toggleRowExpanded(row.id)}
-															aria-expanded={isExpanded}
-														>
-															{taskName && (
-																<div
-																	className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block max-w-[220px] truncate"
-																	title={taskName}
-																>
-																	{taskName}
-																</div>
-															)}
-
-															{isExpanded ? (
-																/* Expanded: show full message, wrapped, preserve whitespace */
-																<div className="text-sm whitespace-pre-wrap break-words">
-																	{message}
-																</div>
-															) : (
-																/* Collapsed: truncated preview (preserve existing behavior & max-w) */
-																<div className="text-sm truncate" title={message}>
-																	{message.length > 100 ? `${message.substring(0, 100)}...` : message}
-																</div>
-															)}
-														</button>
-													</TableCell>
-                                                );
-                                            }
-
-                                            // Default rendering for other columns
-                                            return (
-                                                <TableCell
-                                                    key={cell.id}
-                                                    className={cn(
-                                                        "px-4 py-3 align-middle overflow-hidden",
-                                                        isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : ""
-                                                    )}
-                                                >
-                                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                                </TableCell>
-                                            );
-                                        })}
-                                    </motion.tr>
-                                ))
-                            ) : (
-                                <TableRow>
-                                    <TableCell colSpan={columns.length} className="h-24 text-center">
-                                        No logs found.
-                                    </TableCell>
-                                </TableRow>
-                            )}
-                        </AnimatePresence>
+							{table.getRowModel().rows?.length ? (
+								table.getRowModel().rows.map((row: any, index: number) => (
+									<motion.tr
+										key={row.id}
+										initial={{ opacity: 0, y: 10 }}
+										animate={{
+											opacity: 1,
+											y: 0,
+											transition: {
+												type: "spring",
+												stiffness: 300,
+												damping: 30,
+												delay: index * 0.03,
+											},
+										}}
+										exit={{ opacity: 0, y: -10 }}
+										className={cn(
+											"border-b transition-colors hover:bg-muted/50",
+											row.getIsSelected() ? "bg-muted/50" : ""
+										)}
+									>
+										{row.getVisibleCells().map((cell: any) => {
+											const isCreatedAt = cell.column.id === "created_at";
+											const isMessage = cell.column.id === "message";
+                                             return (
+												<TableCell
+													key={cell.id}
+													className={cn(
+														"px-4 py-3 align-middle overflow-hidden",
+														isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "",
+														isMessage ? "overflow-hidden" : ""
+													)}
+												>
+													{flexRender(cell.column.columnDef.cell, cell.getContext())}
+												</TableCell>
+											);
+                                         })}
+									</motion.tr>
+								))
+							) : (
+								<TableRow>
+									<TableCell colSpan={columns.length} className="h-24 text-center">
+										No logs found.
+									</TableCell>
+								</TableRow>
+							)}
+						</AnimatePresence>
 					</TableBody>
 				</Table>
 			</motion.div>

From ea509b7d57be89397339d0f46fae1dbc90093222 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 13 Oct 2025 21:20:33 +0530
Subject: [PATCH 4/4] refactor: clean up formatting and indentation in
 MessageDetails component

---
 .../[search_space_id]/logs/(manage)/page.tsx  | 124 ++++++++++--------
 1 file changed, 67 insertions(+), 57 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index 1d7cae855..f89e4153f 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -123,52 +123,52 @@ const logStatusConfig = {
 } as const;
 
 function MessageDetails({
-    message,
-    taskName,
-    metadata,
-    createdAt,
-    children,
+	message,
+	taskName,
+	metadata,
+	createdAt,
+	children,
 }: {
-    message: string;
-    taskName?: string;
-    metadata?: any;
-    createdAt?: string;
-    children: React.ReactNode;
+	message: string;
+	taskName?: string;
+	metadata?: any;
+	createdAt?: string;
+	children: React.ReactNode;
 }) {
-    return (
-        <AlertDialog>
-            <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
-            <AlertDialogContent className="max-w-3xl w-full">
-                <div className="flex items-start justify-between gap-4">
-                    <div>
-                        <AlertDialogTitle className="text-lg">Log details</AlertDialogTitle>
-                        {createdAt && (
-                            <p className="text-xs text-muted-foreground mt-1">
-                                {new Date(createdAt).toLocaleString()}
-                            </p>
-                        )}
-                    </div>
-                    <div className="shrink-0">
-                        <AlertDialogCancel className="text-sm">Close</AlertDialogCancel>
-                    </div>
-                </div>
+	return (
+		<AlertDialog>
+			<AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+			<AlertDialogContent className="max-w-3xl w-full">
+				<div className="flex items-start justify-between gap-4">
+					<div>
+						<AlertDialogTitle className="text-lg">Log details</AlertDialogTitle>
+						{createdAt && (
+							<p className="text-xs text-muted-foreground mt-1">
+								{new Date(createdAt).toLocaleString()}
+							</p>
+						)}
+					</div>
+					<div className="shrink-0">
+						<AlertDialogCancel className="text-sm">Close</AlertDialogCancel>
+					</div>
+				</div>
 
-                <div className="mt-4 space-y-4">
-                    {taskName && (
-                        <div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block">
-                            {taskName}
-                        </div>
-                    )}
+				<div className="mt-4 space-y-4">
+					{taskName && (
+						<div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded inline-block">
+							{taskName}
+						</div>
+					)}
 
-                    <div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap">
-                        {message}
-                    </div>
-                </div>
+					<div className="bg-muted p-3 rounded max-h-[40vh] overflow-auto text-sm whitespace-pre-wrap">
+						{message}
+					</div>
+				</div>
 
-                <AlertDialogFooter />
-            </AlertDialogContent>
-        </AlertDialog>
-    );
+				<AlertDialogFooter />
+			</AlertDialogContent>
+		</AlertDialog>
+	);
 }
 
 const columns: ColumnDef<Log>[] = [
@@ -271,19 +271,27 @@ const columns: ColumnDef<Log>[] = [
 			const createdAt = row.getValue("created_at") as string;
 
 			return (
-                <MessageDetails message={message} taskName={taskName} metadata={row.original.log_metadata} createdAt={createdAt}>
-                    <div className="flex flex-col gap-1 max-w-[400px] cursor-pointer">
-                        {taskName && (
-                            <div className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate" title={taskName}>
-                                {taskName}
-                            </div>
-                        )}
-                        <div className="text-sm truncate" title={message}>
-                            {message.length > 100 ? `${message.substring(0, 100)}...` : message}
-                        </div>
-                    </div>
-                </MessageDetails>
-            );
+				<MessageDetails
+					message={message}
+					taskName={taskName}
+					metadata={row.original.log_metadata}
+					createdAt={createdAt}
+				>
+					<div className="flex flex-col gap-1 max-w-[400px] cursor-pointer">
+						{taskName && (
+							<div
+								className="text-xs text-muted-foreground font-mono bg-muted/50 px-2 py-1 rounded truncate"
+								title={taskName}
+							>
+								{taskName}
+							</div>
+						)}
+						<div className="text-sm truncate" title={message}>
+							{message.length > 100 ? `${message.substring(0, 100)}...` : message}
+						</div>
+					</div>
+				</MessageDetails>
+			);
 		},
 		size: 400,
 	},
@@ -954,19 +962,21 @@ function LogsTable({
 										{row.getVisibleCells().map((cell: any) => {
 											const isCreatedAt = cell.column.id === "created_at";
 											const isMessage = cell.column.id === "message";
-                                             return (
+											return (
 												<TableCell
 													key={cell.id}
 													className={cn(
 														"px-4 py-3 align-middle overflow-hidden",
-														isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "",
+														isCreatedAt
+															? "whitespace-nowrap text-xs text-muted-foreground text-right"
+															: "",
 														isMessage ? "overflow-hidden" : ""
 													)}
 												>
 													{flexRender(cell.column.columnDef.cell, cell.getContext())}
 												</TableCell>
 											);
-                                         })}
+										})}
 									</motion.tr>
 								))
 							) : (