From 5c9dd0b78751e210461515d2522f734426c25af2 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 11 Feb 2026 22:48:33 +0530
Subject: [PATCH] refactor: improve UI layout and styling for report generation
 components

---
 .../components/tool-ui/generate-report.tsx    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/surfsense_web/components/tool-ui/generate-report.tsx b/surfsense_web/components/tool-ui/generate-report.tsx
index 40942aa13..69aa07adb 100644
--- a/surfsense_web/components/tool-ui/generate-report.tsx
+++ b/surfsense_web/components/tool-ui/generate-report.tsx
@@ -58,12 +58,12 @@ type GenerateReportResult = z.infer<typeof GenerateReportResultSchema>;
 function ReportGeneratingState({ topic }: { topic: string }) {
 	return (
 		<div className="my-4 overflow-hidden rounded-xl border bg-card">
-			<div className="flex w-full items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-3 sm:px-6 sm:py-4">
-				<div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-					<FileTextIcon className="size-4 sm:size-5 text-primary" />
+			<div className="flex w-full items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-5 sm:px-6 sm:py-6">
+				<div className="flex size-8 sm:size-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+					<FileTextIcon className="size-4 sm:size-6 text-primary" />
 				</div>
 				<div className="min-w-0 flex-1">
-					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight truncate">
+					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight line-clamp-2">
 						{topic}
 					</h3>
 					<TextShimmerLoader text="Putting things together" size="sm" />
@@ -79,12 +79,12 @@ function ReportGeneratingState({ topic }: { topic: string }) {
 function ReportErrorState({ title, error }: { title: string; error: string }) {
 	return (
 		<div className="my-4 overflow-hidden rounded-xl border bg-card">
-			<div className="flex items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-3 sm:px-6 sm:py-4">
-				<div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-lg bg-muted/60">
-					<FileTextIcon className="size-4 sm:size-5 text-muted-foreground" />
+			<div className="flex items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-5 sm:px-6 sm:py-6">
+				<div className="flex size-8 sm:size-12 shrink-0 items-center justify-center rounded-lg bg-muted/60">
+					<FileTextIcon className="size-4 sm:size-6 text-muted-foreground" />
 				</div>
 				<div className="min-w-0 flex-1">
-					<h3 className="font-semibold text-muted-foreground text-sm sm:text-base leading-tight truncate">
+					<h3 className="font-semibold text-muted-foreground text-sm sm:text-base leading-tight line-clamp-2">
 						{title}
 					</h3>
 					<p className="text-muted-foreground/60 text-[11px] sm:text-xs mt-0.5 truncate">
@@ -184,13 +184,13 @@ function ReportCard({
 			<button
 				type="button"
 				onClick={handleOpen}
-				className="flex w-full items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-3 sm:px-6 sm:py-4 text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none"
+				className="flex w-full items-center gap-2 sm:gap-3 bg-muted/30 px-4 py-5 sm:px-6 sm:py-6 text-left transition-colors hover:bg-muted/50 focus:outline-none focus-visible:outline-none"
 			>
-				<div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-					<FileTextIcon className="size-4 sm:size-5 text-primary" />
+				<div className="flex size-8 sm:size-12 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+					<FileTextIcon className="size-4 sm:size-6 text-primary" />
 				</div>
 				<div className="min-w-0 flex-1">
-					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight truncate">
+					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight line-clamp-2">
 						{isLoading ? title : metadata.title}
 					</h3>
 					<p className="text-muted-foreground text-[10px] sm:text-xs mt-0.5">