🐛 Fix TypebotHeader overlapping blocks settings window

Closes #2134

apps/builder/src/features/analytics/components/AnalyticsGraphContainer.tsx

@@ -89,6 +89,7 @@ export const AnalyticsGraphContainer = ({
     <Flex
       w="full"
       pos="relative"
+      overflow="clip"
       bgColor={useColorModeValue("#f4f5f8", "gray.900")}
       backgroundImage={useColorModeValue(
         "radial-gradient(#c6d0e1 1px, transparent 0)",
@@ -128,6 +129,7 @@ export const AnalyticsGraphContainer = ({
       <StatsCards
         stats={stats}
         pos="absolute"
+        top="1rem"
         timeFilter={timeFilter}
         onTimeFilterChange={onTimeFilterChange}
       />

apps/builder/src/features/editor/components/EditorPage.tsx

@@ -39,6 +39,7 @@ export const EditorPage = () => {
         <Flex
           flex="1"
           pos="relative"
+          overflow="clip"
           h="full"
           bgColor={bgColor}
           backgroundImage={backgroundImage}

apps/builder/src/features/editor/components/TypebotHeader.tsx

@@ -60,7 +60,6 @@ export const TypebotHeader = () => {
       justify="center"
       align="center"
       h={`${headerHeight}px`}
-      zIndex={1}
       pos="relative"
       bgColor={headerBgColor}
       flexShrink={0}

apps/builder/src/features/results/components/ResultsPage.tsx

@@ -35,10 +35,7 @@ export const ResultsPage = () => {
     () => router.pathname.endsWith("analytics"),
     [router.pathname],
   );
-  const bgColor = useColorModeValue(
-    router.pathname.endsWith("analytics") ? "#f4f5f8" : "white",
-    router.pathname.endsWith("analytics") ? "gray.900" : "gray.950",
-  );
+  const bgColor = useColorModeValue("white", "gray.950");
   const [timeFilter, setTimeFilter] = useQueryState<
     (typeof timeFilterValues)[number]
   >("timeFilter", {