feat: add attack simulation and fix mobile menu positioning

Author: anugrahk21

frontend/components/ui/AttackSimulation.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Zap, ShieldAlert, ChevronUp, Terminal, Skull, Lock, Eye } from "lucide-react";
 
@@ -52,15 +52,32 @@ const ATTACK_SCENARIOS = [
 
 export default function AttackSimulation({ onSelect, disabled }: AttackSimulationProps) {
     const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen]);
 
     return (
-        <div className="relative">
+        <div ref={containerRef} className="relative">
             <button
                 onClick={() => setIsOpen(!isOpen)}
                 disabled={disabled}
                 className={`flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all text-xs font-mono tracking-wide ${isOpen
-                        ? "bg-red-500/20 border-red-500/50 text-red-200"
-                        : "bg-zinc-900/50 border-white/10 text-zinc-400 hover:text-white hover:border-white/30"
+                    ? "bg-red-500/20 border-red-500/50 text-red-200"
+                    : "bg-zinc-900/50 border-white/10 text-zinc-400 hover:text-white hover:border-white/30"
                     } ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
             >
                 <Zap className={`w-3 h-3 ${isOpen ? "text-red-400" : "text-zinc-500"}`} />
@@ -74,14 +91,14 @@ export default function AttackSimulation({ onSelect, disabled }: AttackSimulatio
                         initial={{ opacity: 0, y: 10, scale: 0.95 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
                         exit={{ opacity: 0, y: 10, scale: 0.95 }}
-                        className="absolute bottom-full left-0 mb-2 w-72 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl overflow-hidden z-50"
+                        className="absolute bottom-full right-0 mb-2 w-72 bg-zinc-900/95 backdrop-blur-xl border border-white/10 rounded-xl shadow-2xl overflow-hidden z-50"
                     >
                         <div className="p-3 border-b border-white/10 bg-white/5">
                             <h3 className="text-xs font-bold text-white uppercase tracking-wider">Select Attack Vector</h3>
                             <p className="text-[10px] text-zinc-500 mt-0.5">Pre-configured prompts to test Cerberus</p>
                         </div>
 
-                        <div className="max-h-64 overflow-y-auto custom-scrollbar p-1">
+                        <div className="p-1">
                             {ATTACK_SCENARIOS.map((scenario) => (
                                 <button
                                     key={scenario.id}