From 7c45e9a868eef0d412d4d920d64baf7f455fcb2b Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 15:21:03 +0000
Subject: [PATCH] fix: resolve z-index and background issues for canvas
 visibility

Remove opaque background, adjust z-index, and add base color for proper theming.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
---
 app/page.tsx                   | 8 ++++----
 components/tech-background.tsx | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 18a992e..1739347 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -641,10 +641,10 @@ export default function TwoFactorAuth() {
   }
 
   return (
-    <div className="min-h-screen bg-background flex flex-col">
+    <div className="min-h-screen flex flex-col relative">
       <TechBackground />
       {/* Header */}
-      <header className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-50">
+      <header className="border-b bg-background/80 backdrop-blur-sm sticky top-0 z-50">
         <div className="max-w-3xl mx-auto px-6 md:px-8 py-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-3">
@@ -749,7 +749,7 @@ export default function TwoFactorAuth() {
       </header>
 
       {/* Main Content */}
-      <main className="flex-1 max-w-3xl mx-auto w-full px-6 md:px-8 py-6">
+      <main className="flex-1 max-w-3xl mx-auto w-full px-6 md:px-8 py-6 relative z-10">
         {/* Timer Progress */}
         <div className="mb-6">
           <div className="flex items-center justify-between mb-2">
@@ -1092,7 +1092,7 @@ export default function TwoFactorAuth() {
       </Dialog>
 
       {/* Footer */}
-      <footer className="border-t py-6 mt-auto">
+      <footer className="border-t py-6 mt-auto relative z-10 bg-background/80 backdrop-blur-sm">
         <div className="mx-auto flex max-w-4xl flex-col items-center gap-2 text-center md:flex-row md:justify-between md:gap-4 px-4">
           <p className="text-xs tracking-wider text-muted-foreground">© 2025 Simon. All rights reserved.</p>
           <div className="flex items-center gap-4 text-xs tracking-wider text-muted-foreground/60">
diff --git a/components/tech-background.tsx b/components/tech-background.tsx
index 6bbd3cd..b3b7ee9 100644
--- a/components/tech-background.tsx
+++ b/components/tech-background.tsx
@@ -111,7 +111,9 @@ export function TechBackground() {
     const animate = () => {
       const isDark = document.documentElement.classList.contains("dark")
       
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      // Fill with base background color
+      ctx.fillStyle = isDark ? "hsl(224, 71%, 4%)" : "hsl(0, 0%, 100%)"
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
 
       // Draw subtle gradient overlay
       const gradient = ctx.createRadialGradient(
@@ -165,7 +167,7 @@ export function TechBackground() {
   return (
     <canvas
       ref={canvasRef}
-      className="fixed inset-0 pointer-events-none -z-10"
+      className="fixed inset-0 pointer-events-none z-0"
       aria-hidden="true"
     />
   )