feat: add expandable message rows in LogsTable for better readability

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
@@ -902,16 +908,67 @@ function LogsTable({
                                         {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}
-													// 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",
+															"px-4 py-3 align-top",
-														// keep Created At compact and prevent wrapping
+															// allow expanded message to wrap; when collapsed keep clipping so it doesn't push other columns
-														isCreatedAt ? "whitespace-nowrap text-xs text-muted-foreground text-right" : "",
+															isExpanded ? "whitespace-normal" : "overflow-hidden",
-														// ensure Message cell uses the cell-level clipping (Message markup still has its max-w)
+															// keep Created At behavior unaffected
-														isMessage ? "overflow-hidden" : ""
+															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())}