From 9339a43db5ef691d3f12686da4f30ffc356a6595 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 12 Feb 2026 04:01:54 +0530
Subject: [PATCH] refactor: improve version switcher UI in report panel for
 mobile and desktop views

---
 .../components/report-panel/report-panel.tsx  | 66 +++++++++++++------
 1 file changed, 47 insertions(+), 19 deletions(-)

diff --git a/surfsense_web/components/report-panel/report-panel.tsx b/surfsense_web/components/report-panel/report-panel.tsx
index 595facf24..9a358091d 100644
--- a/surfsense_web/components/report-panel/report-panel.tsx
+++ b/surfsense_web/components/report-panel/report-panel.tsx
@@ -339,27 +339,55 @@ function ReportPanelContent({
 
 					{/* Version switcher — only shown when multiple versions exist */}
 					{versions.length > 1 && (
-						<div className="flex items-center gap-1">
-							<div className="flex items-center gap-0.5 rounded-lg border bg-muted/30 p-0.5">
-								{versions.map((v, i) => (
-									<button
-										key={v.id}
-										type="button"
-										onClick={() => setActiveReportId(v.id)}
-										className={`px-2 py-0.5 rounded-md text-xs font-medium transition-colors ${
-											v.id === activeReportId
-												? "bg-primary text-primary-foreground shadow-sm"
-												: "text-muted-foreground hover:bg-muted hover:text-foreground"
-										}`}
+						insideDrawer ? (
+							/* Mobile: compact dropdown */
+							<DropdownMenu modal={false}>
+								<DropdownMenuTrigger asChild>
+									<Button
+										variant="outline"
+										size="sm"
+										className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
 									>
-										v{i + 1}
-									</button>
-								))}
+										v{activeVersionIndex + 1}
+										<ChevronDownIcon className="size-3" />
+									</Button>
+								</DropdownMenuTrigger>
+								<DropdownMenuContent align="start" className="min-w-[120px] z-[100]">
+									{versions.map((v, i) => (
+										<DropdownMenuItem
+											key={v.id}
+											onClick={() => setActiveReportId(v.id)}
+											className={v.id === activeReportId ? "bg-accent font-medium" : ""}
+										>
+											Version {i + 1}
+										</DropdownMenuItem>
+									))}
+								</DropdownMenuContent>
+							</DropdownMenu>
+						) : (
+							/* Desktop: inline version buttons */
+							<div className="flex items-center gap-1">
+								<div className="flex items-center gap-0.5 rounded-lg border bg-muted/30 p-0.5">
+									{versions.map((v, i) => (
+										<button
+											key={v.id}
+											type="button"
+											onClick={() => setActiveReportId(v.id)}
+											className={`px-2 py-0.5 rounded-md text-xs font-medium transition-colors ${
+												v.id === activeReportId
+													? "bg-primary text-primary-foreground shadow-sm"
+													: "text-muted-foreground hover:bg-muted hover:text-foreground"
+											}`}
+										>
+											v{i + 1}
+										</button>
+									))}
+								</div>
+								<span className="text-[10px] text-muted-foreground tabular-nums ml-1">
+									{activeVersionIndex + 1} of {versions.length}
+								</span>
 							</div>
-							<span className="text-[10px] text-muted-foreground tabular-nums ml-1">
-								{activeVersionIndex + 1} of {versions.length}
-							</span>
-						</div>
+						)
 					)}
 				</div>
 				{onClose && (