fix(dashboard): fix tracking setup page scroll and clean up tabs DS

- Fix scroll by making hidden-toolbar wrapper a flex container so
  child pages can use flex-1 overflow-y-auto properly
- Align tracking page with other settings pages (max-w-2xl, p-5, space-y-6)
- Add gap-1.5 to Tabs.Tab for icon-text spacing
- Add visual grouping to Tabs.List (border, bg, padding)
- Update active tab style to bg-background + shadow for clear selection state

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/tabs/tracking-setup-tab.tsx

@@ -755,14 +755,14 @@ export function WebsiteTrackingSetupTab({ websiteId }: TrackingSetupTabProps) {
 	};
 
 	return (
-		<div className="space-y-4">
+		<>
 			<TrackingStatusBanner
 				isRefreshing={isRefreshing}
 				isSetup={isSetup}
 				onRefresh={handleRefresh}
 			/>
 
-			<div className="space-y-4">
+			<div className="space-y-6">
 				{/* Step 1: Install */}
 				<Card className="gap-0 py-0">
 					<Card.Content className="p-0">
@@ -839,6 +839,6 @@ export function WebsiteTrackingSetupTab({ websiteId }: TrackingSetupTabProps) {
 					</a>
 				</Button>
 			</div>
-		</div>
+		</>
 	);
 }

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

@@ -112,7 +112,9 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 			)}
 
 			{hideToolbar ? (
-				<div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+				<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+					{children}
+				</div>
 			) : (
 				<div className="min-h-0 flex-1 overflow-y-auto overscroll-none">
 					{showTrackingSetup ? (

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

@@ -8,8 +8,10 @@ export default function TrackingSetupPage() {
 	const websiteId = params.id as string;
 
 	return (
-		<div className="flex-1 overflow-y-auto px-4 py-6 sm:px-6">
-			<WebsiteTrackingSetupTab websiteId={websiteId} />
+		<div className="flex-1 overflow-y-auto">
+			<div className="mx-auto max-w-2xl space-y-6 p-5">
+				<WebsiteTrackingSetupTab websiteId={websiteId} />
+			</div>
 		</div>
 	);
 }

apps/dashboard/components/ds/tabs.tsx

@@ -17,7 +17,10 @@ function List({
 }: ComponentPropsWithoutRef<typeof BaseTabs.List>) {
 	return (
 		<BaseTabs.List
-			className={cn("relative flex gap-0.5", className)}
+			className={cn(
+				"relative flex gap-0.5 rounded-lg border bg-secondary/50 p-1",
+				className
+			)}
 			{...rest}
 		/>
 	);
@@ -30,10 +33,10 @@ function Tab({
 	return (
 		<BaseTabs.Tab
 			className={cn(
-				"inline-flex h-7 cursor-pointer select-none items-center rounded-md px-2.5 font-medium text-muted-foreground text-xs",
+				"inline-flex h-7 cursor-pointer select-none items-center gap-1.5 rounded-md px-2.5 font-medium text-muted-foreground text-xs",
 				"transition-colors duration-(--duration-quick) ease-(--ease-smooth)",
 				"hover:bg-interactive-hover hover:text-foreground",
-				"data-active:bg-secondary data-active:text-foreground",
+				"data-active:bg-background data-active:text-foreground data-active:shadow-sm",
 				"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60",
 				"disabled:pointer-events-none disabled:opacity-50",
 				className