fix: filter overlay

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/filters-section.tsx

@@ -226,7 +226,7 @@ export function FiltersSection() {
 	}
 
 	return (
-		<div className="slide-in-from-top-2 animate-in overflow-hidden border-x border-b bg-card shadow-sm duration-300">
+		<div className="slide-in-from-top-2 animate-in overflow-hidden border-b bg-card duration-300">
 			{editingFilter && (
 				<div className="border-amber-200/50 border-b bg-gradient-to-r from-amber-50/80 to-amber-50/40 px-2 py-2 text-amber-900 text-xs sm:px-4 sm:py-3 sm:text-sm">
 					<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-0">

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

@@ -3,29 +3,26 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useAtom } from "jotai";
 import { useParams, usePathname } from "next/navigation";
+import { useLayoutEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import NotFound from "@/app/not-found";
 import { useTrackingSetup } from "@/hooks/use-tracking-setup";
 import { isAnalyticsRefreshingAtom } from "@/stores/jotai/filterAtoms";
 import { AnalyticsToolbar } from "./_components/analytics-toolbar";
 import { FiltersSection } from "./_components/filters-section";
 
-interface WebsiteLayoutProps {
+type WebsiteLayoutProps = {
 	children: React.ReactNode;
-}
+};
 
 export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 	const { id } = useParams();
 	const pathname = usePathname();
 	const queryClient = useQueryClient();
 	const { isTrackingSetup } = useTrackingSetup(id as string);
 	const [isRefreshing, setIsRefreshing] = useAtom(isAnalyticsRefreshingAtom);
-
-	if (!id) {
-		return <NotFound />;
-	}
-
-	const websiteId = id as string;
+	const toolbarRef = useRef<HTMLDivElement>(null);
+	const [toolbarHeight, setToolbarHeight] = useState(88);
 
 	const isAssistantPage =
 		pathname.includes("/assistant") ||
@@ -35,6 +32,34 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 		pathname.includes("/settings") ||
 		pathname.includes("/users");
 
+	useLayoutEffect(() => {
+		const element = toolbarRef.current;
+		if (!element || isAssistantPage || !isTrackingSetup) {
+			setToolbarHeight(0);
+			return;
+		}
+
+		const updateHeight = () => {
+			const height = element.getBoundingClientRect().height;
+			setToolbarHeight(height);
+		};
+
+		updateHeight();
+
+		const resizeObserver = new ResizeObserver(updateHeight);
+		resizeObserver.observe(element);
+
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [isTrackingSetup, isAssistantPage]);
+
+	if (!id) {
+		return <NotFound />;
+	}
+
+	const websiteId = id as string;
+
 	const handleRefresh = async () => {
 		setIsRefreshing(true);
 		try {
@@ -59,7 +84,10 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 	return (
 		<div className="flex h-full flex-col overflow-hidden">
 			{isTrackingSetup && !isAssistantPage && (
-				<div className="fixed top-12 right-0 left-0 z-50 flex-shrink-0 space-y-0 bg-background md:top-0 md:left-84">
+				<div
+					className="fixed top-12 right-0 left-0 z-50 shrink-0 space-y-0 bg-background md:top-0 md:left-84"
+					ref={toolbarRef}
+				>
 					<AnalyticsToolbar
 						isRefreshing={isRefreshing}
 						onRefresh={handleRefresh}
@@ -70,7 +98,12 @@ export default function WebsiteLayout({ children }: WebsiteLayoutProps) {
 			)}
 
 			<div
-				className={`${isAssistantPage ? "min-h-0 flex-1" : isTrackingSetup && !isAssistantPage ? "min-h-0 flex-1 overflow-y-auto pt-[88px] md:pt-[88px]" : "min-h-0 flex-1 overflow-y-auto"}`}
+				className={`${isAssistantPage ? "min-h-0 flex-1" : isTrackingSetup && !isAssistantPage ? "min-h-0 flex-1 overflow-y-auto" : "min-h-0 flex-1 overflow-y-auto"}`}
+				style={
+					isTrackingSetup && !isAssistantPage
+						? { paddingTop: `${toolbarHeight}px` }
+						: undefined
+				}
 			>
 				{children}
 			</div>