fix: correct text alignment and remove duplicate borders (#212)

* fix: web vitals empty state text alignment

* fix: remove double borders in data table component

Author: akash3444

apps/dashboard/app/(main)/websites/[id]/vitals/page.tsx

@@ -245,7 +245,7 @@ export default function VitalsPage() {
 					/>
 				) : (
 					<div className="rounded border bg-card p-8 text-center">
-						<p className="text-muted-foreground text-sm">
+						<p className="mx-auto text-muted-foreground text-sm">
 							Click on a metric above to add it to the chart
 						</p>
 					</div>
@@ -260,7 +260,7 @@ export default function VitalsPage() {
 						<h3 className="mt-4 font-medium text-foreground">
 							No Web Vitals data yet
 						</h3>
-						<p className="mt-1 text-muted-foreground text-sm">
+						<p className="mx-auto mt-1 text-muted-foreground text-sm">
 							Web Vitals will appear here once your tracker starts collecting
 							performance data from real users.
 						</p>

apps/dashboard/components/table/data-table.tsx

@@ -177,7 +177,8 @@ export function DataTable<TData extends { name: string | number }, TValue>({
 					/>
 				)}
 
-				<div className="overflow-hidden">
+				{/* Remove borders to prevent double borders. Card already has borders on the left and bottom. */}
+				<div className="overflow-hidden [&_tr:last-child]:border-b-0 [&_tr]:border-l-0">
 					<TableContent
 						activeTab={activeTab}
 						emptyMessage={emptyMessage}

apps/dashboard/components/ui/table.tsx

@@ -32,7 +32,7 @@ function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
 function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
 	return (
 		<tbody
-			className={cn('[&_tr:last-child]:border-0', className)}
+			className={className}
 			data-slot="table-body"
 			{...props}
 		/>