fix: Synchronize profile modal state reactively via useEffect and add scroll container

frontend/src/components/ProfileModal.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { X, User, Award, Check, AlertCircle, CheckCircle2 } from 'lucide-react';
 import { apiFetch } from '../api/client';
 import { getRandomSkillColor } from '../utils/colors';
@@ -14,6 +14,17 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
     safeUserSkills.map(s => (typeof s === 'object' ? s.id : s))
   );
 
+  useEffect(() => {
+    if (user) {
+      setDisplayName(user.display_name || user.username || '');
+      const uSkills = user.skills ? (Array.isArray(user.skills) ? user.skills : []) : [];
+      setSelectedSkillIds(uSkills.map(s => (typeof s === 'object' ? s.id : s)));
+    } else {
+      setDisplayName(localStorage.getItem('guest_display_name') || '');
+      setSelectedSkillIds([]);
+    }
+  }, [user]);
+
   // New skill fields
   const [newSkillName, setNewSkillName] = useState('');
   const [newSkillDesc, setNewSkillDesc] = useState('');
@@ -93,7 +104,7 @@ export default function ProfileModal({ user, skills = [], onClose, onUserUpdated
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm overflow-y-auto animate-in fade-in duration-200">
-      <div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans">
+      <div className="bg-surface w-full max-w-lg rounded-sm border border-grid p-6 shadow-2xl relative my-8 text-main font-sans max-h-[90vh] overflow-y-auto">
         {/* Close Button */}
         <button
           onClick={onClose}