Verify page: don't let the action bar cover the email when embedded

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>

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)}