From 7ff4c1de29ba1cf7d8f5858938da5f8f126e619f Mon Sep 17 00:00:00 2001
From: ramvignesh-b <ramvignesh-b@github.com>
Date: Wed, 22 Apr 2026 19:15:20 +0530
Subject: [PATCH] fix: apply overflow-hidden and invisible to EnvelopeReveal
 container when revealed

---
 frontend/src/pages/Reader.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Reader.tsx b/frontend/src/pages/Reader.tsx
index de843a3..87363e8 100644
--- a/frontend/src/pages/Reader.tsx
+++ b/frontend/src/pages/Reader.tsx
@@ -192,7 +192,11 @@ export default function Reader() {
     <section className="min-h-fit w-full bg-base-100 px-4 py-8 md:py-16 font-serif relative overflow-hidden">
       <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
       <div
-        className={`transition-all duration-1000 relative ${revealState === "revealed" ? "opacity-0 w-0 h-0" : "opacity-100"}`}
+        className={`transition-all duration-1000 relative ${
+          revealState === "revealed"
+            ? "opacity-0 w-0 h-0 overflow-hidden invisible"
+            : "opacity-100"
+        }`}
       >
         <EnvelopeReveal
           recipient={metadata?.recipient || "Someone dear"}