From b247be80e53cd273cf0578825dad0afda2fd45fa Mon Sep 17 00:00:00 2001
From: Satyam <95536056+Satyam-Rastogi@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:51:51 +0530
Subject: [PATCH] fix: used createPortal to ensure chatbot stays fixed to
 viewport

---
 src/components/Chatbot.jsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/Chatbot.jsx b/src/components/Chatbot.jsx
index 6f2feae..49644d6 100644
--- a/src/components/Chatbot.jsx
+++ b/src/components/Chatbot.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import Groq from 'groq-sdk';
 import ReactMarkdown from 'react-markdown';
 import { useAuth } from '../context/AuthContext';
@@ -241,19 +242,20 @@ ${scheduleSummary}`;
     };
 
     if (!isOpen) {
-        return (
+        return createPortal(
             <button
                 onClick={() => setIsOpen(true)}
-                className="fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-tr from-blue-600 to-cyan-500 rounded-full shadow-xl shadow-blue-500/30 flex items-center justify-center text-white hover:scale-110 transition-transform z-50"
+                className="fixed bottom-6 right-6 w-14 h-14 bg-gradient-to-tr from-blue-600 to-cyan-500 rounded-full shadow-xl shadow-blue-500/30 flex items-center justify-center text-white hover:scale-110 transition-transform z-[9999]"
             >
                 <div className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full border-2 border-white animate-pulse"></div>
                 <MessageCircle size={28} />
-            </button>
+            </button>,
+            document.body
         );
     }
 
-    return (
-        <div className={`fixed bottom-6 right-6 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl z-50 transition-all duration-300 overflow-hidden border border-gray-100 dark:border-zinc-800 flex flex-col ${isMinimized ? 'w-72 h-14' : 'w-80 md:w-96 h-[500px]'}`}>
+    return createPortal(
+        <div className={`fixed bottom-6 right-6 bg-white dark:bg-zinc-900 rounded-2xl shadow-2xl z-[9999] transition-all duration-300 overflow-hidden border border-gray-100 dark:border-zinc-800 flex flex-col ${isMinimized ? 'w-72 h-14' : 'w-80 md:w-96 h-[500px]'}`}>
 
             {/* Header */}
             <div className="bg-slate-900 dark:bg-black p-4 flex items-center justify-between shrink-0 cursor-pointer" onClick={() => !isMinimized && setIsMinimized(!isMinimized)}>
@@ -337,7 +339,8 @@ ${scheduleSummary}`;
                     </div>
                 </>
             )}
-        </div>
+        </div>,
+        document.body
     );
 };