From ce8f9de8ecf0c666d307da82f52bd16739ee716c Mon Sep 17 00:00:00 2001
From: Matti Nannt <mail@matthiasnannt.com>
Date: Thu, 26 Jun 2025 08:35:19 +0200
Subject: [PATCH] fix: confetti animation display issue (#6085)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Victor Santos <victor@formbricks.com>
---
 apps/web/locales/pt-BR.json                     |  4 ++--
 .../ui/components/confetti/index.test.tsx       |  5 +++++
 .../modules/ui/components/confetti/index.tsx    | 17 ++++++++++++++++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/web/locales/pt-BR.json b/apps/web/locales/pt-BR.json
index cd8a73088a..dec70b5931 100644
--- a/apps/web/locales/pt-BR.json
+++ b/apps/web/locales/pt-BR.json
@@ -356,7 +356,7 @@
     "start_free_trial": "Iniciar Teste Grátis",
     "status": "status",
     "step_by_step_manual": "Manual passo a passo",
-    "styling": "estilização",
+    "styling": "Estilização",
     "submit": "Enviar",
     "summary": "Resumo",
     "survey": "Pesquisa",
@@ -368,7 +368,7 @@
     "survey_paused": "Pesquisa pausada.",
     "survey_scheduled": "Pesquisa agendada.",
     "survey_type": "Tipo de Pesquisa",
-    "surveys": "pesquisas",
+    "surveys": "Pesquisas",
     "switch_organization": "Mudar organização",
     "switch_to": "Mudar para {environment}",
     "table_items_deleted_successfully": "{type}s deletados com sucesso",
diff --git a/apps/web/modules/ui/components/confetti/index.test.tsx b/apps/web/modules/ui/components/confetti/index.test.tsx
index b2bd359ec0..26b2319cad 100644
--- a/apps/web/modules/ui/components/confetti/index.test.tsx
+++ b/apps/web/modules/ui/components/confetti/index.test.tsx
@@ -12,6 +12,7 @@ vi.mock("react-confetti", () => ({
       data-colors={JSON.stringify(props.colors)}
       data-number-of-pieces={props.numberOfPieces}
       data-recycle={props.recycle}
+      style={props.style}
     />
   )),
 }));
@@ -36,6 +37,10 @@ describe("Confetti", () => {
     expect(confettiElement).toHaveAttribute("data-colors", JSON.stringify(["#00C4B8", "#eee"]));
     expect(confettiElement).toHaveAttribute("data-number-of-pieces", "400");
     expect(confettiElement).toHaveAttribute("data-recycle", "false");
+    expect(confettiElement).toHaveAttribute(
+      "style",
+      "position: fixed; top: 0px; left: 0px; z-index: 9999; pointer-events: none;"
+    );
   });
 
   test("renders with custom colors", () => {
diff --git a/apps/web/modules/ui/components/confetti/index.tsx b/apps/web/modules/ui/components/confetti/index.tsx
index 4dbab6d964..9859484dbb 100644
--- a/apps/web/modules/ui/components/confetti/index.tsx
+++ b/apps/web/modules/ui/components/confetti/index.tsx
@@ -13,5 +13,20 @@ export const Confetti: React.FC<ConfettiProps> = ({
   colors?: string[];
 }) => {
   const { width, height } = useWindowSize();
-  return <ReactConfetti width={width} height={height} colors={colors} numberOfPieces={400} recycle={false} />;
+  return (
+    <ReactConfetti
+      width={width}
+      height={height}
+      colors={colors}
+      numberOfPieces={400}
+      recycle={false}
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        zIndex: 9999,
+        pointerEvents: "none",
+      }}
+    />
+  );
 };