fix style

frontend/src/pages/ChallengeList.jsx

@@ -4,6 +4,7 @@ import api from '../api';
 
 export default function ChallengeList() {
   const [challenges, setChallenges] = useState([]);
+  const [pendingInvites, setPendingInvites] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [showResults, setShowResults] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -18,6 +19,10 @@ export default function ChallengeList() {
     try {
       const data = await api.getChallenges();
       setChallenges(data.challenges);
+      
+      // Filter out pending invitations
+      const pending = data.challenges.filter(c => c.participation_status === 'pending');
+      setPendingInvites(pending);
     } catch (err) {
       console.error('Failed to load challenges:', err);
     } finally {
@@ -25,6 +30,15 @@ export default function ChallengeList() {
     }
   };
 
+  const handleRespondToInvite = async (challengeId, status) => {
+    try {
+      await api.respondToChallenge(challengeId, status);
+      await loadChallenges();
+    } catch (err) {
+      alert('Failed to respond: ' + err.message);
+    }
+  };
+
   const handleSearch = (query) => {
     setSearchQuery(query);
     
@@ -84,6 +98,48 @@ export default function ChallengeList() {
       <div className="container">
         <h1 style={{ marginBottom: '2rem' }}>My Challenges</h1>
 
+        {/* Pending Invitations */}
+        {pendingInvites.length > 0 && (
+          <div className="card" style={{ marginBottom: '2rem', background: 'var(--bg-lighter)' }}>
+            <h3 style={{ marginBottom: '1rem' }}>📬 Pending Invitations</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+              {pendingInvites.map(challenge => (
+                <div key={challenge.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+                  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flex: 1 }}>
+                    {challenge.cover_image_url && (
+                      <img 
+                        src={challenge.cover_image_url}
+                        alt={challenge.title}
+                        style={{ width: '40px', height: '60px', objectFit: 'cover', borderRadius: '0.25rem' }}
+                      />
+                    )}
+                    <div>
+                      <div style={{ fontWeight: 500 }}>{challenge.title}</div>
+                      <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>
+                        Invited by {challenge.creator_username}
+                      </div>
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', gap: '0.5rem' }}>
+                    <button
+                      className="btn btn-success btn-sm"
+                      onClick={() => handleRespondToInvite(challenge.id, 'accepted')}
+                    >
+                      Accept
+                    </button>
+                    <button
+                      className="btn btn-danger btn-sm"
+                      onClick={() => handleRespondToInvite(challenge.id, 'rejected')}
+                    >
+                      Decline
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
         {/* Search/Create */}
         <div style={{ marginBottom: '2rem', position: 'relative' }}>
           <input
@@ -141,13 +197,13 @@ export default function ChallengeList() {
         </div>
 
         {/* Challenge List */}
-        {challenges.length === 0 ? (
+        {challenges.filter(c => c.participation_status !== 'pending').length === 0 ? (
           <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
             <p style={{ color: 'var(--text-muted)' }}>No challenges yet. Search for a show above to create one!</p>
           </div>
         ) : (
           <div className="grid grid-2">
-            {challenges.map(challenge => (
+            {challenges.filter(c => c.participation_status !== 'pending').map(challenge => (
               <Link key={challenge.id} to={`/challenges/${challenge.id}`} style={{ textDecoration: 'none' }}>
                 <div className="card" style={{ height: '100%', display: 'flex', gap: '1rem' }}>
                   {challenge.cover_image_url && (