From 4a5af63715311bb3006818f820531eac675d46ca Mon Sep 17 00:00:00 2001
From: SohamBhattacharjee2003
 <125297948+SohamBhattacharjee2003@users.noreply.github.com>
Date: Wed, 8 Apr 2026 05:36:19 +0530
Subject: [PATCH] fix: replace transition-all with specific transition
 properties for better performance

- Replace transition-all with transition-[width] in Sidebar.tsx for width animations
- Replace transition-all with specific properties in animated-tabs.tsx for hover/active indicators
- Replace transition-all with transition-[background-color,border-color,box-shadow] in navbar.tsx
- Replace transition-all with transition-[width] in audio.tsx volume bar
- Replace transition-all with transition-[background-color,border-color,color] in thread.tsx
- Replace transition-all with transition-[box-shadow] in all tool-ui status cards (28+ files)

This reduces unnecessary browser layout/paint work by only animating the specific
properties that change, avoiding expensive recalculations for properties like
width, height, margin, and padding that don't need animation.

Fixes #1147
---
 surfsense_web/components/assistant-ui/thread.tsx |  2 +-
 surfsense_web/components/homepage/navbar.tsx     | 16 ++++++++--------
 .../components/layout/ui/sidebar/Sidebar.tsx     |  4 ++--
 surfsense_web/components/tool-ui/audio.tsx       |  2 +-
 .../confluence/create-confluence-page.tsx        |  2 +-
 .../confluence/delete-confluence-page.tsx        |  2 +-
 .../confluence/update-confluence-page.tsx        |  2 +-
 .../components/tool-ui/dropbox/create-file.tsx   |  2 +-
 .../components/tool-ui/dropbox/trash-file.tsx    |  2 +-
 .../components/tool-ui/generate-report.tsx       |  2 +-
 .../components/tool-ui/gmail/create-draft.tsx    |  2 +-
 .../components/tool-ui/gmail/send-email.tsx      |  2 +-
 .../components/tool-ui/gmail/trash-email.tsx     |  2 +-
 .../components/tool-ui/gmail/update-draft.tsx    |  2 +-
 .../tool-ui/google-calendar/create-event.tsx     |  2 +-
 .../tool-ui/google-calendar/delete-event.tsx     |  2 +-
 .../tool-ui/google-calendar/update-event.tsx     |  2 +-
 .../tool-ui/google-drive/create-file.tsx         |  2 +-
 .../tool-ui/google-drive/trash-file.tsx          |  2 +-
 .../tool-ui/jira/create-jira-issue.tsx           |  2 +-
 .../tool-ui/jira/delete-jira-issue.tsx           |  2 +-
 .../tool-ui/jira/update-jira-issue.tsx           |  2 +-
 .../tool-ui/linear/create-linear-issue.tsx       |  2 +-
 .../tool-ui/linear/delete-linear-issue.tsx       |  2 +-
 .../tool-ui/linear/update-linear-issue.tsx       |  2 +-
 .../tool-ui/notion/create-notion-page.tsx        |  2 +-
 .../tool-ui/notion/delete-notion-page.tsx        |  2 +-
 .../tool-ui/notion/update-notion-page.tsx        |  2 +-
 .../components/tool-ui/onedrive/create-file.tsx  |  2 +-
 .../components/tool-ui/onedrive/trash-file.tsx   |  2 +-
 .../generate-video-presentation.tsx              |  2 +-
 surfsense_web/components/ui/animated-tabs.tsx    |  4 ++--
 32 files changed, 41 insertions(+), 41 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 097b3208d..8bdb4ce31 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -1191,7 +1191,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 						aria-pressed={isWebSearchEnabled}
 						onClick={() => toggleTool("web_search")}
 						className={cn(
-							"rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8 select-none",
+							"rounded-full transition-[background-color,border-color,color] flex items-center gap-1 px-2 py-1 border h-8 select-none",
 							isWebSearchEnabled
 								? "bg-sky-500/15 border-sky-500/60 text-sky-500"
 								: "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
diff --git a/surfsense_web/components/homepage/navbar.tsx b/surfsense_web/components/homepage/navbar.tsx
index 6ed5265bc..ffd5ddb32 100644
--- a/surfsense_web/components/homepage/navbar.tsx
+++ b/surfsense_web/components/homepage/navbar.tsx
@@ -60,7 +60,7 @@ const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 				setHovered(null);
 			}}
 			className={cn(
-				"mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full px-4 py-2 lg:flex transition-all duration-300",
+				"mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full px-4 py-2 lg:flex transition-[background-color,border-color,box-shadow] duration-300",
 				isScrolled
 					? (scrolledBgClassName ??
 							"bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50")
@@ -144,13 +144,13 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 			ref={navRef}
 			animate={{ borderRadius: open ? "4px" : "2rem" }}
 			key={String(open)}
-			className={cn(
-				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
-				isScrolled
-					? (scrolledBgClassName ??
-							"bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50")
-					: "bg-transparent border border-transparent"
-			)}
+				className={cn(
+					"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-[background-color,border-color,box-shadow] duration-300",
+					isScrolled
+						? (scrolledBgClassName ??
+								"bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50")
+						: "bg-transparent border border-transparent"
+				)}
 		>
 			<div className="flex w-full flex-row items-center justify-between">
 				<Link
diff --git a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
index 85d9cd799..dc3d1178e 100644
--- a/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/Sidebar.tsx
@@ -97,8 +97,8 @@ export function Sidebar({
 		<div
 			className={cn(
 				"relative flex h-full flex-col bg-sidebar text-sidebar-foreground overflow-hidden select-none",
-				isCollapsed ? "w-[60px] transition-all duration-200" : "",
-				!isCollapsed && !isResizing ? "transition-all duration-200" : "",
+				isCollapsed ? "w-[60px] transition-[width] duration-200" : "",
+				!isCollapsed && !isResizing ? "transition-[width] duration-200" : "",
 				className
 			)}
 			style={!isCollapsed ? { width: sidebarWidth } : undefined}
diff --git a/surfsense_web/components/tool-ui/audio.tsx b/surfsense_web/components/tool-ui/audio.tsx
index a8fe434a2..aeadae45b 100644
--- a/surfsense_web/components/tool-ui/audio.tsx
+++ b/surfsense_web/components/tool-ui/audio.tsx
@@ -251,7 +251,7 @@ export function Audio({ id, src, title, durationMs, className }: AudioProps) {
 						<div className="relative hidden h-6 w-16 items-center md:flex md:opacity-0 md:pointer-events-none md:group-hover/volume:opacity-100 md:group-hover/volume:pointer-events-auto md:transition-opacity md:duration-200">
 							<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"
+									className="absolute left-0 top-0 h-full rounded-full bg-muted-foreground/60 transition-[width]"
 									style={{ width: `${(isMuted ? 0 : volume) * 100}%` }}
 								/>
 							</div>
diff --git a/surfsense_web/components/tool-ui/confluence/create-confluence-page.tsx b/surfsense_web/components/tool-ui/confluence/create-confluence-page.tsx
index d45c6879e..d22f317b8 100644
--- a/surfsense_web/components/tool-ui/confluence/create-confluence-page.tsx
+++ b/surfsense_web/components/tool-ui/confluence/create-confluence-page.tsx
@@ -199,7 +199,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/confluence/delete-confluence-page.tsx b/surfsense_web/components/tool-ui/confluence/delete-confluence-page.tsx
index 538b84bfe..258f259f0 100644
--- a/surfsense_web/components/tool-ui/confluence/delete-confluence-page.tsx
+++ b/surfsense_web/components/tool-ui/confluence/delete-confluence-page.tsx
@@ -193,7 +193,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx b/surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx
index d88fe94cd..8bc0772a4 100644
--- a/surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx
+++ b/surfsense_web/components/tool-ui/confluence/update-confluence-page.tsx
@@ -214,7 +214,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/dropbox/create-file.tsx b/surfsense_web/components/tool-ui/dropbox/create-file.tsx
index 9c477e556..ac45f1f5b 100644
--- a/surfsense_web/components/tool-ui/dropbox/create-file.tsx
+++ b/surfsense_web/components/tool-ui/dropbox/create-file.tsx
@@ -195,7 +195,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
diff --git a/surfsense_web/components/tool-ui/dropbox/trash-file.tsx b/surfsense_web/components/tool-ui/dropbox/trash-file.tsx
index 62f74f34c..0b38777c1 100644
--- a/surfsense_web/components/tool-ui/dropbox/trash-file.tsx
+++ b/surfsense_web/components/tool-ui/dropbox/trash-file.tsx
@@ -134,7 +134,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
diff --git a/surfsense_web/components/tool-ui/generate-report.tsx b/surfsense_web/components/tool-ui/generate-report.tsx
index 4f22bbb8f..a4b2b6c7b 100644
--- a/surfsense_web/components/tool-ui/generate-report.tsx
+++ b/surfsense_web/components/tool-ui/generate-report.tsx
@@ -213,7 +213,7 @@ function ReportCard({
 
 	return (
 		<div
-			className={`my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300 ${isActive ? "ring-1 ring-primary/50" : ""}`}
+			className={`my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300 ${isActive ? "ring-1 ring-primary/50" : ""}`}
 		>
 			<button
 				type="button"
diff --git a/surfsense_web/components/tool-ui/gmail/create-draft.tsx b/surfsense_web/components/tool-ui/gmail/create-draft.tsx
index aa8f58c72..97e93fecb 100644
--- a/surfsense_web/components/tool-ui/gmail/create-draft.tsx
+++ b/surfsense_web/components/tool-ui/gmail/create-draft.tsx
@@ -198,7 +198,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/gmail/send-email.tsx b/surfsense_web/components/tool-ui/gmail/send-email.tsx
index fda375e51..e0e1ffa6c 100644
--- a/surfsense_web/components/tool-ui/gmail/send-email.tsx
+++ b/surfsense_web/components/tool-ui/gmail/send-email.tsx
@@ -197,7 +197,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/gmail/trash-email.tsx b/surfsense_web/components/tool-ui/gmail/trash-email.tsx
index f79d093f0..f1640f3fc 100644
--- a/surfsense_web/components/tool-ui/gmail/trash-email.tsx
+++ b/surfsense_web/components/tool-ui/gmail/trash-email.tsx
@@ -175,7 +175,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/gmail/update-draft.tsx b/surfsense_web/components/tool-ui/gmail/update-draft.tsx
index 7789368b2..b3b0d2d21 100644
--- a/surfsense_web/components/tool-ui/gmail/update-draft.tsx
+++ b/surfsense_web/components/tool-ui/gmail/update-draft.tsx
@@ -230,7 +230,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/google-calendar/create-event.tsx b/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
index a2e23dd36..37e5028e7 100644
--- a/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/create-event.tsx
@@ -266,7 +266,7 @@ function ApprovalCard({
 		: attendeesList;
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx b/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
index 404a6ced2..039c0e3b0 100644
--- a/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/delete-event.tsx
@@ -203,7 +203,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/google-calendar/update-event.tsx b/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
index a31e9e103..a2304b179 100644
--- a/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
+++ b/surfsense_web/components/tool-ui/google-calendar/update-event.tsx
@@ -338,7 +338,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
diff --git a/surfsense_web/components/tool-ui/google-drive/create-file.tsx b/surfsense_web/components/tool-ui/google-drive/create-file.tsx
index efbd59453..af263032d 100644
--- a/surfsense_web/components/tool-ui/google-drive/create-file.tsx
+++ b/surfsense_web/components/tool-ui/google-drive/create-file.tsx
@@ -217,7 +217,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/google-drive/trash-file.tsx b/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
index 9d6a2fafb..f5ac11a3c 100644
--- a/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
+++ b/surfsense_web/components/tool-ui/google-drive/trash-file.tsx
@@ -193,7 +193,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx b/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
index cc9ccd7dd..cabb0d840 100644
--- a/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
+++ b/surfsense_web/components/tool-ui/jira/create-jira-issue.tsx
@@ -235,7 +235,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/jira/delete-jira-issue.tsx b/surfsense_web/components/tool-ui/jira/delete-jira-issue.tsx
index 01e682f33..2cad2be46 100644
--- a/surfsense_web/components/tool-ui/jira/delete-jira-issue.tsx
+++ b/surfsense_web/components/tool-ui/jira/delete-jira-issue.tsx
@@ -188,7 +188,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/jira/update-jira-issue.tsx b/surfsense_web/components/tool-ui/jira/update-jira-issue.tsx
index 2a6366b51..4132fad06 100644
--- a/surfsense_web/components/tool-ui/jira/update-jira-issue.tsx
+++ b/surfsense_web/components/tool-ui/jira/update-jira-issue.tsx
@@ -246,7 +246,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/linear/create-linear-issue.tsx b/surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
index b03eda86c..1dec11c60 100644
--- a/surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
+++ b/surfsense_web/components/tool-ui/linear/create-linear-issue.tsx
@@ -243,7 +243,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx b/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
index 59a66999d..18790f560 100644
--- a/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
+++ b/surfsense_web/components/tool-ui/linear/delete-linear-issue.tsx
@@ -171,7 +171,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/linear/update-linear-issue.tsx b/surfsense_web/components/tool-ui/linear/update-linear-issue.tsx
index 731bb8012..f15f04224 100644
--- a/surfsense_web/components/tool-ui/linear/update-linear-issue.tsx
+++ b/surfsense_web/components/tool-ui/linear/update-linear-issue.tsx
@@ -305,7 +305,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/notion/create-notion-page.tsx b/surfsense_web/components/tool-ui/notion/create-notion-page.tsx
index 9394fd9e0..52ac363ee 100644
--- a/surfsense_web/components/tool-ui/notion/create-notion-page.tsx
+++ b/surfsense_web/components/tool-ui/notion/create-notion-page.tsx
@@ -195,7 +195,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx b/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
index a2dd70752..792a3e8c4 100644
--- a/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
+++ b/surfsense_web/components/tool-ui/notion/delete-notion-page.tsx
@@ -172,7 +172,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/notion/update-notion-page.tsx b/surfsense_web/components/tool-ui/notion/update-notion-page.tsx
index 56a557e47..5b7ce7daa 100644
--- a/surfsense_web/components/tool-ui/notion/update-notion-page.tsx
+++ b/surfsense_web/components/tool-ui/notion/update-notion-page.tsx
@@ -176,7 +176,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/onedrive/create-file.tsx b/surfsense_web/components/tool-ui/onedrive/create-file.tsx
index d66f04d24..244b894dc 100644
--- a/surfsense_web/components/tool-ui/onedrive/create-file.tsx
+++ b/surfsense_web/components/tool-ui/onedrive/create-file.tsx
@@ -179,7 +179,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
diff --git a/surfsense_web/components/tool-ui/onedrive/trash-file.tsx b/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
index 0b887865f..b5d2e3d67 100644
--- a/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
+++ b/surfsense_web/components/tool-ui/onedrive/trash-file.tsx
@@ -130,7 +130,7 @@ function ApprovalCard({
 	}, [handleApprove]);
 
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-[box-shadow] duration-300">
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div>
 					<p className="text-sm font-semibold text-foreground">
diff --git a/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx b/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
index 25ff97d20..6d8bfa5a5 100644
--- a/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
+++ b/surfsense_web/components/tool-ui/video-presentation/generate-video-presentation.tsx
@@ -434,7 +434,7 @@ function VideoPresentationPlayer({
 							</span>
 							<div className="h-1.5 w-20 overflow-hidden rounded-full bg-muted">
 								<div
-									className="h-full rounded-full bg-muted-foreground/60 transition-all duration-300"
+									className="h-full rounded-full bg-muted-foreground/60 transition-[box-shadow] duration-300"
 									style={{ width: `${(renderProgress ?? 0) * 100}%` }}
 								/>
 							</div>
diff --git a/surfsense_web/components/ui/animated-tabs.tsx b/surfsense_web/components/ui/animated-tabs.tsx
index 43ae82121..b636f06d6 100644
--- a/surfsense_web/components/ui/animated-tabs.tsx
+++ b/surfsense_web/components/ui/animated-tabs.tsx
@@ -365,7 +365,7 @@ const TabsList = forwardRef<
 						{showHoverEffect && (
 							<div
 								className={cn(
-									"absolute transition-all duration-300 ease-out flex items-center z-0",
+									"absolute transition-[left,width,opacity] duration-300 ease-out flex items-center z-0",
 									SIZE_CLASSES[size],
 									HOVER_INDICATOR_CLASSES[variant],
 									hoverIndicatorClassName
@@ -460,7 +460,7 @@ const TabsList = forwardRef<
 						{showActiveIndicator && variant !== "pills" && activeIndex >= 0 && (
 							<div
 								className={cn(
-									"absolute transition-all duration-300 ease-out z-10",
+									"absolute transition-[left,width,bottom,top] duration-300 ease-out z-10",
 									ACTIVE_INDICATOR_CLASSES[variant],
 									activeIndicatorPosition === "top" ? "top-[-1px]" : "bottom-[-1px]",
 									activeIndicatorClassName