fix: AI assistant page

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/assistant/components/ai-assistant-main.tsx

@@ -56,19 +56,19 @@ export default function AIAssistantMain() {
 
 	return (
 		<div className="h-full bg-gradient-to-br from-background to-muted/20">
-			<div className="flex h-full flex-1 flex-col gap-3 overflow-hidden lg:flex-row">
+			<div className="flex h-full flex-col gap-3 overflow-hidden lg:flex-row">
 				<div
 					className={cn(
-						'flex flex-col overflow-hidden',
-						shouldShowVisualization ? 'lg:flex-[0.6]' : 'flex-1'
+						'flex min-h-0 flex-col overflow-hidden',
+						shouldShowVisualization ? 'flex-1 lg:flex-[3]' : 'flex-1'
 					)}
 				>
 					<Suspense fallback={<ChatSkeleton />}>
 						<ChatSection />
 					</Suspense>
 				</div>
 				{shouldShowVisualization && (
-					<div className="flex flex-[0.4] flex-col overflow-hidden">
+					<div className="flex min-h-0 flex-1 flex-col overflow-hidden lg:flex-[2]">
 						<Suspense fallback={<VisualizationSkeleton />}>
 							<VisualizationSection />
 						</Suspense>

apps/dashboard/app/(main)/websites/[id]/assistant/components/chat-section.tsx

@@ -137,7 +137,7 @@ export default function ChatSection() {
 	};
 
 	return (
-		<div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded border bg-gradient-to-br from-background to-muted/10 shadow-lg backdrop-blur-sm">
+		<div className="flex h-full min-h-0 flex-col overflow-hidden rounded border bg-gradient-to-br from-background to-muted/10 shadow-lg backdrop-blur-sm">
 			{/* Enhanced Header */}
 			<div className="flex flex-shrink-0 items-center justify-between border-b bg-gradient-to-r from-primary/5 to-accent/5 p-4">
 				<div className="flex min-w-0 flex-1 items-center gap-3">
@@ -201,9 +201,12 @@ export default function ChatSection() {
 			</div>
 
 			{/* Messages Area */}
-			<div className="min-h-0 flex-1 overflow-y-auto" ref={scrollAreaRef}>
+			<div
+				className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+				ref={scrollAreaRef}
+			>
 				{/* Welcome State */}
-				<div className="h-full px-4 py-3">
+				<div className="min-h-full px-4 py-3">
 					{!(hasMessages || isLoading) && (
 						<div className="fade-in-0 slide-in-from-bottom-4 h-full animate-in space-y-6 duration-500">
 							<div className="flex h-full flex-col justify-between">

apps/dashboard/app/(main)/websites/[id]/assistant/components/visualization-section.tsx

@@ -1157,15 +1157,13 @@ export default function VisualizationSection() {
 				)}
 			</div>
 
-			<div className="min-h-0 flex-1 overflow-y-auto">
-				<ScrollArea className="h-full">
-					<div
-						className={`p-3 transition-all duration-300 ${websiteData ? 'opacity-100' : 'opacity-90'}`}
-					>
-						{renderChartContent()}
-					</div>
-				</ScrollArea>
-			</div>
+			<ScrollArea className="min-h-0 flex-1">
+				<div
+					className={`p-3 transition-all duration-300 ${websiteData ? 'opacity-100' : 'opacity-90'}`}
+				>
+					{renderChartContent()}
+				</div>
+			</ScrollArea>
 		</div>
 	);
 }

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

@@ -22,8 +22,8 @@ const AIAssistantMain = dynamic(
 
 function AIAssistantLoadingSkeleton() {
 	return (
-		<div className="flex h-full flex-col gap-3">
-			<div className="flex flex-1 gap-3 overflow-hidden">
+		<div className="flex h-full min-h-0 flex-col gap-3">
+			<div className="flex min-h-0 flex-1 gap-3 overflow-hidden">
 				<div className="flex flex-[2_2_0%] flex-col overflow-hidden rounded border bg-background shadow-sm">
 					<div className="flex-shrink-0 border-b p-3">
 						<Skeleton className="mb-1 h-5 w-32" />
@@ -81,5 +81,9 @@ export default function AssistantPage() {
 		return <AIAssistantLoadingSkeleton />;
 	}
 
-	return <AIAssistantMain />;
+	return (
+		<div className="h-full min-h-0">
+			<AIAssistantMain />
+		</div>
+	);
 }

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

@@ -50,9 +50,9 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 	};
 
 	return (
-		<div className="mx-auto h-full max-w-[1600px] p-3 sm:p-4 lg:p-6">
+		<div className="mx-auto flex h-full max-w-[1600px] flex-col p-3 sm:p-4 lg:p-6">
 			{isTrackingSetup && !isAssistantPage && (
-				<div className="space-y-4">
+				<div className="flex-shrink-0 space-y-4">
 					<AnalyticsToolbar
 						isRefreshing={isRefreshing}
 						onRefresh={handleRefresh}
@@ -64,7 +64,7 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 				</div>
 			)}
 
-			{children}
+			<div className={isAssistantPage ? 'min-h-0 flex-1' : ''}>{children}</div>
 		</div>
 	);
 }