From 1c1b7b0e83e14c075b8518b29220db802aa502e2 Mon Sep 17 00:00:00 2001
From: Divide-By-0 <aayushg@mit.edu>
Date: Mon, 5 Oct 2026 16:25:05 -0700
Subject: [PATCH] fix(verify): render the action bar inline when the verify
 page is embedded

In an iframe (e.g. a blog embedding a proof) the viewport is short, so the
fixed bottom bar sat on top of the email text and, below md, showed only an
unlabeled icon. When embedded, render the bar in normal flow after the
email; always label the verify button; reserve bottom padding on the
standalone page so the end of the email can scroll clear of the fixed bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/ActionBar.tsx | 16 ++++++++++++++--
 src/pages/VerifyPage.tsx     | 28 ++++++++++++++++++++--------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/ActionBar.tsx b/src/components/ActionBar.tsx
index aa3f761..dc37e85 100644
--- a/src/components/ActionBar.tsx
+++ b/src/components/ActionBar.tsx
@@ -17,6 +17,11 @@ interface ActionBarProps {
   showVerifyProof?: boolean; // If true, show verify proof button instead of verify button
   proofVerified?: boolean;
   hasMaskedContent?: boolean; // If false, disable the View & Download button
+  // NOTE: inline=true renders the bar in normal page flow instead of pinned to the viewport
+  // bottom. Used when the verify page is embedded in an iframe: there the viewport is short, so
+  // the fixed bar sat on top of the email text and, below the md breakpoint, showed only an
+  // unlabeled icon. Removing this brings that overlap back for every embed.
+  inline?: boolean;
 }
 
 export default function ActionBar({
@@ -31,6 +36,7 @@ export default function ActionBar({
   showVerifyProof = false,
   proofVerified = false,
   hasMaskedContent = false,
+  inline = false,
 }: ActionBarProps) {
   const verifyLabel = isVerifyingProof
     ? "Verifying..."
@@ -44,7 +50,13 @@ export default function ActionBar({
   const isViewDownloadDisabled = isGeneratingProof || !hasMaskedContent;
 
   return (
-    <div className="fixed bottom-4 md:bottom-10 left-1/2 transform -translate-x-1/2 z-50 px-4 w-max">
+    <div
+      className={
+        inline
+          ? "flex justify-center px-4 mt-6 mb-8"
+          : "fixed bottom-4 md:bottom-10 left-1/2 transform -translate-x-1/2 z-50 px-4 w-max"
+      }
+    >
       <div className="bg-[#F5F3EF] rounded-2xl px-4 md:px-4 py-3 md:py-3 shadow-[0px_4px_8px_0px_rgba(0,0,0,0.08)]">
         <div className="flex items-center gap-4 md:gap-4 flex-wrap justify-center">
           {/* {!showVerifyProof && (
@@ -95,7 +107,7 @@ export default function ActionBar({
                 )}
               </div>
               <span
-                className={`text-base font-normal hidden md:block text-[#111314]`}
+                className={`text-base font-normal text-[#111314]`}
               >
                 {verifyLabel}
               </span>
diff --git a/src/pages/VerifyPage.tsx b/src/pages/VerifyPage.tsx
index 44468b4..f75f816 100644
--- a/src/pages/VerifyPage.tsx
+++ b/src/pages/VerifyPage.tsx
@@ -305,11 +305,23 @@ export default function VerifyPage() {
     );
   }
 
+  // NOTE: when this page is iframed (e.g. a blog embedding a proof), render the action bar
+  // inline after the email instead of fixed to the viewport, so it can't cover the email text.
+  // Accessing window.top can throw for cross-origin parents in some browsers; treat that as embedded.
+  let isEmbedded = false;
+  try {
+    isEmbedded = window.self !== window.top;
+  } catch {
+    isEmbedded = true;
+  }
+
   return (
     <div className="min-h-screen bg-[#F5F3EF] relative px-0 md:px-4 lg:px-6">
       <Header navigate={navigate} onShare={handleShare} />
 
-      <main className="pt-20 md:pt-16 lg:pt-20 px-6 md:px-0">
+      {/* NOTE: pb-32 reserves room for the fixed action bar on the standalone page, so the end of
+          the email can scroll clear of it instead of staying hidden underneath. */}
+      <main className={`pt-20 md:pt-16 lg:pt-20 px-6 md:px-0 ${isEmbedded ? "" : "pb-32"}`}>
         <div className="w-full max-w-4xl mx-auto">
           {/* Verification Status Banner */}
           {verificationStatus && (
@@ -411,15 +423,15 @@ export default function VerifyPage() {
             </div>
           </div>
         </div>
+        <ActionBar
+          inline={isEmbedded}
+          onVerifyProof={handleVerify}
+          isVerifyingProof={isVerifying}
+          showVerifyProof={true}
+          proofVerified={verificationStatus?.verified === true}
+        />
       </main>
 
-      <ActionBar
-        onVerifyProof={handleVerify}
-        isVerifyingProof={isVerifying}
-        showVerifyProof={true}
-        proofVerified={verificationStatus?.verified === true}
-      />
-
       <VerificationUrlModal
         isOpen={showVerificationModal}
         onClose={() => setShowVerificationModal(false)}