feat: Click backdrop to close modals

Added click-to-close on background scrim for main UI modals:
- WelcomeModal
- KeyboardShortcutsHelp
- AboutPanel
- TidalGlossary
- HistoricalFacts

Modal content has stopPropagation to prevent accidental closes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: cjw6k

tidal-harmonics/src/components/ui/AboutPanel.tsx

@@ -26,8 +26,14 @@ export function AboutPanel() {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[85vh] overflow-hidden flex flex-col">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={() => setIsOpen(false)}
+    >
+      <div
+        className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[85vh] overflow-hidden flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
           <h2 className="text-xl font-bold text-white">About Tidal Harmonics</h2>

tidal-harmonics/src/components/ui/HistoricalFacts.tsx

@@ -177,8 +177,14 @@ export function HistoricalFacts({ onClose }: HistoricalFactsProps) {
   }, [selectedCategory]);
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="px-6 py-4 border-b border-slate-700">
           <div className="flex justify-between items-center mb-3">

tidal-harmonics/src/components/ui/KeyboardShortcutsHelp.tsx

@@ -30,8 +30,14 @@ export function KeyboardShortcutsHelp() {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-md w-full mx-4">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={() => setIsOpen(false)}
+    >
+      <div
+        className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-md w-full mx-4"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="px-6 py-4 border-b border-slate-700 flex justify-between items-center">
           <h2 className="text-lg font-bold text-white">Keyboard Shortcuts</h2>
           <button

tidal-harmonics/src/components/ui/TidalGlossary.tsx

@@ -290,8 +290,14 @@ export function TidalGlossary({ onClose }: TidalGlossaryProps) {
   );
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-2xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="px-6 py-4 border-b border-slate-700">
           <div className="flex justify-between items-center mb-3">

tidal-harmonics/src/components/ui/WelcomeModal.tsx

@@ -29,8 +29,14 @@ export function WelcomeModal() {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-      <div className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-md w-full mx-4 overflow-hidden">
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={handleClose}
+    >
+      <div
+        className="bg-slate-900 rounded-2xl shadow-2xl border border-slate-700 max-w-md w-full mx-4 overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
         {/* Header */}
         <div className="px-6 py-4 border-b border-slate-700">
           <h2 className="text-xl font-bold text-white">Welcome to Tidal Harmonics!</h2>