From a3b6012fb2f74c2b97e9c8c0206d164d6fe036a8 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 27 Jan 2026 19:47:07 +0530
Subject: [PATCH] feat: podcast and audio UI is now mobile responsive

---
 surfsense_web/components/tool-ui/audio.tsx    | 52 +++++------
 .../components/tool-ui/generate-podcast.tsx   | 86 +++++++++----------
 2 files changed, 69 insertions(+), 69 deletions(-)

diff --git a/surfsense_web/components/tool-ui/audio.tsx b/surfsense_web/components/tool-ui/audio.tsx
index 4b7679cd6..24f7734d7 100644
--- a/surfsense_web/components/tool-ui/audio.tsx
+++ b/surfsense_web/components/tool-ui/audio.tsx
@@ -149,16 +149,16 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 		return (
 			<div
 				className={cn(
-					"flex items-center gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-4",
+					"flex items-center gap-3 sm:gap-4 rounded-xl border border-destructive/20 bg-destructive/5 p-3 sm:p-4",
 					className
 				)}
 			>
-				<div className="flex size-16 items-center justify-center rounded-lg bg-destructive/10">
-					<Volume2Icon className="size-8 text-destructive" />
+				<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-lg bg-destructive/10">
+					<Volume2Icon className="size-6 sm:size-8 text-destructive" />
 				</div>
-				<div className="flex-1">
-					<p className="font-medium text-destructive">{title}</p>
-					<p className="text-destructive/70 text-sm">{error}</p>
+				<div className="flex-1 min-w-0">
+					<p className="font-medium text-destructive text-sm sm:text-base truncate">{title}</p>
+					<p className="text-destructive/70 text-xs sm:text-sm">{error}</p>
 				</div>
 			</div>
 		);
@@ -168,7 +168,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 		<div
 			id={id}
 			className={cn(
-				"group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-4 shadow-sm transition-all hover:shadow-md",
+				"group relative overflow-hidden rounded-xl border bg-gradient-to-br from-background to-muted/30 p-3 sm:p-4 shadow-sm transition-all hover:shadow-md",
 				className
 			)}
 		>
@@ -177,15 +177,15 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 				<track kind="captions" srcLang="en" label="English captions" default />
 			</audio>
 
-			<div className="flex gap-4">
+			<div className="flex gap-3 sm:gap-4">
 				{/* Artwork */}
 				<div className="relative shrink-0">
-					<div className="relative size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner">
+					<div className="relative size-14 sm:size-20 overflow-hidden rounded-lg bg-gradient-to-br from-primary/20 to-primary/5 shadow-inner">
 						{artwork ? (
 							<Image src={artwork} alt={title} fill className="object-cover" unoptimized />
 						) : (
 							<div className="flex size-full items-center justify-center">
-								<Volume2Icon className="size-8 text-primary/50" />
+								<Volume2Icon className="size-6 sm:size-8 text-primary/50" />
 							</div>
 						)}
 					</div>
@@ -195,14 +195,14 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 				<div className="flex min-w-0 flex-1 flex-col justify-between">
 					{/* Title and description */}
 					<div className="min-w-0">
-						<h3 className="truncate font-semibold text-foreground">{title}</h3>
+						<h3 className="truncate font-semibold text-foreground text-sm sm:text-base">{title}</h3>
 						{description && (
-							<p className="mt-0.5 line-clamp-1 text-muted-foreground text-sm">{description}</p>
+							<p className="mt-0.5 line-clamp-1 text-muted-foreground text-xs sm:text-sm">{description}</p>
 						)}
 					</div>
 
 					{/* Progress bar */}
-					<div className="mt-2 space-y-1">
+					<div className="mt-1.5 sm:mt-2 space-y-0.5 sm:space-y-1">
 						<Slider
 							value={[currentTime]}
 							max={duration || 100}
@@ -211,7 +211,7 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 							className="cursor-pointer"
 							disabled={isLoading}
 						/>
-						<div className="flex justify-between text-muted-foreground text-xs">
+						<div className="flex justify-between text-muted-foreground text-[10px] sm:text-xs">
 							<span>{formatTime(currentTime)}</span>
 							<span>{formatTime(duration)}</span>
 						</div>
@@ -220,33 +220,33 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 			</div>
 
 			{/* Controls */}
-			<div className="mt-3 flex items-center justify-between border-t pt-3">
-				<div className="flex items-center gap-2">
+			<div className="mt-2 sm:mt-3 flex items-center justify-between border-t pt-2 sm:pt-3">
+				<div className="flex items-center gap-1.5 sm:gap-2">
 					{/* Play/Pause button */}
 					<Button
 						variant="default"
 						size="sm"
 						onClick={togglePlayPause}
 						disabled={isLoading}
-						className="gap-2"
+						className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm"
 					>
 						{isLoading ? (
-							<div className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+							<div className="size-3 sm:size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
 						) : isPlaying ? (
-							<PauseIcon className="size-4" />
+							<PauseIcon className="size-3 sm:size-4" />
 						) : (
-							<PlayIcon className="size-4" />
+							<PlayIcon className="size-3 sm:size-4" />
 						)}
 						{isPlaying ? "Pause" : "Play"}
 					</Button>
 
 					{/* Volume control */}
-					<div className="flex items-center gap-1.5">
-						<Button variant="ghost" size="icon" onClick={toggleMute} className="size-8">
-							{isMuted ? <VolumeXIcon className="size-4" /> : <Volume2Icon className="size-4" />}
+					<div className="flex items-center gap-1 sm:gap-1.5">
+						<Button variant="ghost" size="icon" onClick={toggleMute} className="size-7 sm:size-8">
+							{isMuted ? <VolumeXIcon className="size-3.5 sm:size-4" /> : <Volume2Icon className="size-3.5 sm:size-4" />}
 						</Button>
 						{/* Custom volume bar - visually distinct from progress slider */}
-						<div className="relative flex h-6 w-16 items-center">
+						<div className="relative flex h-6 w-12 sm:w-16 items-center">
 							<div className="relative h-1 w-full rounded-full bg-muted-foreground/20">
 								<div
 									className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-all"
@@ -268,8 +268,8 @@ export function Audio({ id, src, title, description, artwork, durationMs, classN
 				</div>
 
 				{/* Download button */}
-				<Button variant="outline" size="sm" onClick={handleDownload} className="gap-2">
-					<DownloadIcon className="size-4" />
+				<Button variant="outline" size="sm" onClick={handleDownload} className="gap-1.5 sm:gap-2 h-7 sm:h-8 px-2.5 sm:px-3 text-xs sm:text-sm">
+					<DownloadIcon className="size-3 sm:size-4" />
 					Download
 				</Button>
 			</div>
diff --git a/surfsense_web/components/tool-ui/generate-podcast.tsx b/surfsense_web/components/tool-ui/generate-podcast.tsx
index c76d7ce5a..513853c1a 100644
--- a/surfsense_web/components/tool-ui/generate-podcast.tsx
+++ b/surfsense_web/components/tool-ui/generate-podcast.tsx
@@ -86,23 +86,23 @@ function parsePodcastDetails(data: unknown): { podcast_transcript?: PodcastTrans
  */
 function PodcastGeneratingState({ title }: { title: string }) {
 	return (
-		<div className="my-4 overflow-hidden rounded-xl border border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 p-6">
-			<div className="flex items-center gap-4">
-				<div className="relative">
-					<div className="flex size-16 items-center justify-center rounded-full bg-primary/20">
-						<MicIcon className="size-8 text-primary" />
+		<div className="my-4 overflow-hidden rounded-xl border border-primary/20 bg-gradient-to-br from-primary/5 to-primary/10 p-4 sm:p-6">
+			<div className="flex items-center gap-3 sm:gap-4">
+				<div className="relative shrink-0">
+					<div className="flex size-12 sm:size-16 items-center justify-center rounded-full bg-primary/20">
+						<MicIcon className="size-6 sm:size-8 text-primary" />
 					</div>
 					{/* Animated rings */}
 					<div className="absolute inset-1 animate-ping rounded-full bg-primary/20" />
 				</div>
-				<div className="flex-1">
-					<h3 className="font-semibold text-foreground text-lg">{title}</h3>
-					<div className="mt-2 flex items-center gap-2 text-muted-foreground">
-						<Spinner size="sm" />
-						<span className="text-sm">Generating podcast. This may take a few minutes.</span>
+				<div className="flex-1 min-w-0">
+					<h3 className="font-semibold text-foreground text-sm sm:text-lg leading-tight">{title}</h3>
+					<div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
+						<Spinner size="sm" className="size-3 sm:size-4" />
+						<span className="text-xs sm:text-sm">Generating podcast. This may take a few minutes.</span>
 					</div>
-					<div className="mt-3">
-						<div className="h-1.5 w-full overflow-hidden rounded-full bg-primary/10">
+					<div className="mt-2 sm:mt-3">
+						<div className="h-1 sm:h-1.5 w-full overflow-hidden rounded-full bg-primary/10">
 							<div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
 						</div>
 					</div>
@@ -117,15 +117,15 @@ function PodcastGeneratingState({ title }: { title: string }) {
  */
 function PodcastErrorState({ title, error }: { title: string; error: string }) {
 	return (
-		<div className="my-4 overflow-hidden rounded-xl border border-destructive/20 bg-destructive/5 p-6">
-			<div className="flex items-center gap-4">
-				<div className="flex size-16 shrink-0 items-center justify-center rounded-full bg-destructive/10">
-					<AlertCircleIcon className="size-8 text-destructive" />
+		<div className="my-4 overflow-hidden rounded-xl border border-destructive/20 bg-destructive/5 p-4 sm:p-6">
+			<div className="flex items-center gap-3 sm:gap-4">
+				<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-destructive/10">
+					<AlertCircleIcon className="size-6 sm:size-8 text-destructive" />
 				</div>
-				<div className="flex-1">
-					<h3 className="font-semibold text-foreground">{title}</h3>
-					<p className="mt-1 text-destructive text-sm">Failed to generate podcast</p>
-					<p className="mt-2 text-muted-foreground text-sm">{error}</p>
+				<div className="flex-1 min-w-0">
+					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">{title}</h3>
+					<p className="mt-1 text-destructive text-xs sm:text-sm">Failed to generate podcast</p>
+					<p className="mt-1.5 sm:mt-2 text-muted-foreground text-xs sm:text-sm">{error}</p>
 				</div>
 			</div>
 		</div>
@@ -137,16 +137,16 @@ function PodcastErrorState({ title, error }: { title: string; error: string }) {
  */
 function AudioLoadingState({ title }: { title: string }) {
 	return (
-		<div className="my-4 overflow-hidden rounded-xl border bg-muted/30 p-6">
-			<div className="flex items-center gap-4">
-				<div className="flex size-16 items-center justify-center rounded-full bg-primary/10">
-					<MicIcon className="size-8 text-primary/50" />
+		<div className="my-4 overflow-hidden rounded-xl border bg-muted/30 p-4 sm:p-6">
+			<div className="flex items-center gap-3 sm:gap-4">
+				<div className="flex size-12 sm:size-16 shrink-0 items-center justify-center rounded-full bg-primary/10">
+					<MicIcon className="size-6 sm:size-8 text-primary/50" />
 				</div>
-				<div className="flex-1">
-					<h3 className="font-semibold text-foreground">{title}</h3>
-					<div className="mt-2 flex items-center gap-2 text-muted-foreground">
-						<Spinner size="sm" />
-						<span className="text-sm">Loading audio...</span>
+				<div className="flex-1 min-w-0">
+					<h3 className="font-semibold text-foreground text-sm sm:text-base leading-tight">{title}</h3>
+					<div className="mt-1.5 sm:mt-2 flex items-center gap-1.5 sm:gap-2 text-muted-foreground">
+						<Spinner size="sm" className="size-3 sm:size-4" />
+						<span className="text-xs sm:text-sm">Loading audio...</span>
 					</div>
 				</div>
 			</div>
@@ -264,13 +264,13 @@ function PodcastPlayer({
 			/>
 			{/* Transcript section */}
 			{transcript && transcript.length > 0 && (
-				<details className="mt-3 rounded-lg border bg-muted/30 p-3">
-					<summary className="cursor-pointer font-medium text-muted-foreground text-sm hover:text-foreground">
+				<details className="mt-2 sm:mt-3 rounded-lg border bg-muted/30 p-2.5 sm:p-3">
+					<summary className="cursor-pointer font-medium text-muted-foreground text-xs sm:text-sm hover:text-foreground">
 						View transcript ({transcript.length} entries)
 					</summary>
-					<div className="mt-3 space-y-3 max-h-96 overflow-y-auto">
+					<div className="mt-2 sm:mt-3 space-y-2 sm:space-y-3 max-h-64 sm:max-h-96 overflow-y-auto">
 						{transcript.map((entry, idx) => (
-							<div key={`${idx}-${entry.speaker_id}`} className="text-sm">
+							<div key={`${idx}-${entry.speaker_id}`} className="text-xs sm:text-sm">
 								<span className="font-medium text-primary">Speaker {entry.speaker_id + 1}:</span>{" "}
 								<span className="text-muted-foreground">{entry.dialog}</span>
 							</div>
@@ -392,9 +392,9 @@ export const GeneratePodcastToolUI = makeAssistantToolUI<
 		if (status.type === "incomplete") {
 			if (status.reason === "cancelled") {
 				return (
-					<div className="my-4 rounded-xl border border-muted p-4 text-muted-foreground">
-						<p className="flex items-center gap-2">
-							<MicIcon className="size-4" />
+					<div className="my-4 rounded-xl border border-muted p-3 sm:p-4 text-muted-foreground">
+						<p className="flex items-center gap-1.5 sm:gap-2 text-xs sm:text-sm">
+							<MicIcon className="size-3.5 sm:size-4" />
 							<span className="line-through">Podcast generation cancelled</span>
 						</p>
 					</div>
@@ -424,16 +424,16 @@ export const GeneratePodcastToolUI = makeAssistantToolUI<
 		// The FIRST tool call will display the podcast when ready
 		if (result.status === "already_generating") {
 			return (
-				<div className="my-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5 p-4">
-					<div className="flex items-center gap-3">
-						<div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20">
-							<MicIcon className="size-5 text-amber-500" />
+				<div className="my-4 overflow-hidden rounded-xl border border-amber-500/20 bg-amber-500/5 p-3 sm:p-4">
+					<div className="flex items-center gap-2.5 sm:gap-3">
+						<div className="flex size-8 sm:size-10 shrink-0 items-center justify-center rounded-full bg-amber-500/20">
+							<MicIcon className="size-4 sm:size-5 text-amber-500" />
 						</div>
-						<div>
-							<p className="text-amber-600 dark:text-amber-400 text-sm font-medium">
+						<div className="min-w-0">
+							<p className="text-amber-600 dark:text-amber-400 text-xs sm:text-sm font-medium">
 								Podcast already in progress
 							</p>
-							<p className="text-muted-foreground text-xs mt-0.5">
+							<p className="text-muted-foreground text-[10px] sm:text-xs mt-0.5">
 								Please wait for the current podcast to complete.
 							</p>
 						</div>