From fa4fb7aa7fe309811f469bf7b7c9ebf96eafc88a Mon Sep 17 00:00:00 2001
From: swamimalode07 <swamimalode2004@gmail.com>
Date: Fri, 1 May 2026 17:28:37 +0530
Subject: [PATCH 1/2] removed transitions from data table for better UX

---
 apps/dashboard/components/table/data-table.tsx    | 2 +-
 apps/dashboard/components/table/table-content.tsx | 4 ++--
 apps/dashboard/components/table/table-tabs.tsx    | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/components/table/data-table.tsx b/apps/dashboard/components/table/data-table.tsx
index 1a378bc1a..22972814c 100644
--- a/apps/dashboard/components/table/data-table.tsx
+++ b/apps/dashboard/components/table/data-table.tsx
@@ -181,7 +181,7 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 						ref={modalRef}
 						tabIndex={-1}
 					>
-						<div className="absolute inset-0 animate-fadein bg-black/70 backdrop-blur-[3px] transition-opacity" />
+						<div className="absolute inset-0 animate-fadein bg-black/70 backdrop-blur-[3px]" />
 						<div
 							className={cn(
 								"relative flex scale-100 animate-scalein flex-col overflow-hidden rounded-lg border border-border/60 bg-card shadow-2xl",
diff --git a/apps/dashboard/components/table/table-content.tsx b/apps/dashboard/components/table/table-content.tsx
index cdffb99af..2051937f3 100644
--- a/apps/dashboard/components/table/table-content.tsx
+++ b/apps/dashboard/components/table/table-content.tsx
@@ -288,7 +288,7 @@ function TableContentInner<TData extends { name: string | number }>({
 							<Fragment key={row.id}>
 								<TableRow
 									className={cn(
-										"group border-border/60 border-b bg-card transition-[background-color,box-shadow] duration-150 last:border-b-0 hover:bg-accent-brighter/70 hover:shadow-[inset_0_1px_0_var(--border),inset_0_-1px_0_var(--border)]",
+										"group border-border/60 border-b bg-card last:border-b-0 hover:bg-accent-brighter/70 hover:shadow-[inset_0_1px_0_var(--border),inset_0_-1px_0_var(--border)]",
 										isExpanded &&
 											"bg-accent-brighter shadow-[inset_0_1px_0_var(--border),inset_0_-1px_0_var(--border)] hover:bg-accent-brighter",
 										canActivate &&
@@ -336,7 +336,7 @@ function TableContentInner<TData extends { name: string | number }>({
 										return (
 											<TableCell
 												className={cn(
-													"h-9 px-3 py-1.5 text-foreground text-sm leading-5 transition-colors first:pl-3 last:pr-3",
+													"h-9 px-3 py-1.5 text-foreground text-sm leading-5 first:pl-3 last:pr-3",
 													cellIndex === 0 && "font-medium",
 													isCompactColumn && "px-3 text-right tabular-nums",
 													(cell.column.columnDef.meta as any)?.className
diff --git a/apps/dashboard/components/table/table-tabs.tsx b/apps/dashboard/components/table/table-tabs.tsx
index 4c4e865ea..63f0aea8f 100644
--- a/apps/dashboard/components/table/table-tabs.tsx
+++ b/apps/dashboard/components/table/table-tabs.tsx
@@ -34,7 +34,7 @@ export function TableTabs<TData>({
 						aria-controls={`tabpanel-${tab.id}`}
 						aria-selected={isActive}
 						className={cn(
-							"-mb-px cursor-pointer border-b-2 px-3 py-2 font-medium text-sm transition-colors hover:text-foreground",
+							"-mb-px cursor-pointer border-b-2 px-3 py-2 font-medium text-sm hover:text-foreground",
 							isActive
 								? "border-foreground text-foreground"
 								: "border-transparent text-muted-foreground"

From dcadf9570c2bc561897aa1e92e3e32642b08515d Mon Sep 17 00:00:00 2001
From: swamimalode07 <swamimalode2004@gmail.com>
Date: Fri, 1 May 2026 22:27:28 +0530
Subject: [PATCH 2/2] fixed gauge card UI

---
 .../app/(main)/websites/[id]/vitals/page.tsx       |  2 +-
 .../components/analytics/vital-gauge-card.tsx      | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/dashboard/app/(main)/websites/[id]/vitals/page.tsx b/apps/dashboard/app/(main)/websites/[id]/vitals/page.tsx
index 2455fd39d..f2373f43c 100644
--- a/apps/dashboard/app/(main)/websites/[id]/vitals/page.tsx
+++ b/apps/dashboard/app/(main)/websites/[id]/vitals/page.tsx
@@ -522,7 +522,7 @@ export default function VitalsPage() {
 					/>
 				) : null}
 
-				<div className="grid grid-cols-2 gap-1.5 rounded-xl bg-secondary p-1.5 sm:grid-cols-3 lg:grid-cols-6">
+				<div className="grid grid-cols-2 gap-2 rounded-xl border p-1.5 sm:grid-cols-3 lg:grid-cols-6">
 					{vitalKeys.map((key) => (
 						<VitalGaugeCard
 							isActive={visibleMetrics[key]}
diff --git a/apps/dashboard/components/analytics/vital-gauge-card.tsx b/apps/dashboard/components/analytics/vital-gauge-card.tsx
index 20799321b..bd2b8ae30 100644
--- a/apps/dashboard/components/analytics/vital-gauge-card.tsx
+++ b/apps/dashboard/components/analytics/vital-gauge-card.tsx
@@ -257,9 +257,9 @@ export function VitalGaugeCard({
 	return (
 		<Card
 			className={cn(
-				"gap-0 overflow-hidden border bg-card py-0 transition-all",
-				isClickable && "cursor-pointer hover:border-primary",
-				isActive && isClickable && "ring-2 ring-primary/20",
+				"gap-0 bg-card p-1 transition-[opacity,box-shadow,border-color,background-color] duration-150",
+				isClickable && "cursor-pointer",
+				isActive && isClickable && "border-primary/60 shadow-sm shadow-primary/10 bg-primary/[0.02]",
 				!isActive && "opacity-50 grayscale",
 				className
 			)}
@@ -277,7 +277,7 @@ export function VitalGaugeCard({
 			role={isClickable ? "button" : undefined}
 			tabIndex={isClickable ? 0 : undefined}
 		>
-			<div className="dotted-bg relative flex items-center justify-center bg-accent py-3">
+			<div className="dotted-bg relative flex items-center justify-center bg-accent py-3 border rounded-t-lg">
 				{hasValue && rating ? (
 					<GaugeChart
 						formatValue={formatValue}
@@ -293,7 +293,7 @@ export function VitalGaugeCard({
 					</div>
 				)}
 
-				<div className="absolute top-2 right-2">
+				<div className="absolute top-1 right-1">
 					<Tooltip
 						content={
 							<div className="max-w-xs p-0">
@@ -319,7 +319,7 @@ export function VitalGaugeCard({
 										</ul>
 									</div>
 								)}
-								<div className="flex justify-between bg-accent px-3 py-1.5">
+								<div className="flex justify-between bg-card px-3 py-1.5">
 									<span className="text-muted-foreground text-xs">
 										Good: {config.lowerIsBetter === false ? "≥" : "≤"}{" "}
 										{config.name === "CLS"
@@ -369,7 +369,7 @@ export function VitalGaugeCard({
 				)}
 			</div>
 
-			<div className="flex items-center gap-2 border-t px-2.5 py-2">
+			<div className="flex items-center gap-2 px-2.5 py-2">
 				<div className="min-w-0 flex-1">
 					<p className="truncate font-semibold text-sm leading-tight">
 						{config.name}