Update main.py

main.py

@@ -461,36 +461,40 @@ CHALLENGES = [
 
 
 def _challenge_card_html(c: dict) -> str:
-    """Return HTML for a single challenge card (no navigation button — use gr.Button instead)."""
+    """Single self-contained card with button inside the HTML."""
     if c["active"]:
         return f"""
         <div style="border:2px solid #2563eb;border-radius:12px;padding:24px;
-                    background:#f0f7ff;height:100%;">
-            <div style="font-size:2.2rem;margin-bottom:8px;">{c['emoji']}</div>
-            <h3 style="margin:0 0 8px 0;color:#1e40af;font-size:1.05rem;">{c['title']}</h3>
-            <p style="margin:0 0 12px 0;color:#374151;font-size:0.88rem;line-height:1.5;">{c['description']}</p>
-            <div style="background:#dbeafe;border-radius:6px;padding:5px 10px;
-                        font-size:0.75rem;color:#1d4ed8;font-family:monospace;">
+                    background:#f0f7ff;display:flex;flex-direction:column;height:260px;box-sizing:border-box;">
+            <div style="font-size:2rem;margin-bottom:8px;">{c['emoji']}</div>
+            <h3 style="margin:0 0 6px 0;color:#1e40af;font-size:1rem;font-weight:700;">{c['title']}</h3>
+            <p style="margin:0 0 10px 0;color:#374151;font-size:0.82rem;line-height:1.45;flex:1;">{c['description']}</p>
+            <div style="background:#dbeafe;border-radius:5px;padding:4px 8px;
+                        font-size:0.72rem;color:#1d4ed8;font-family:monospace;margin-bottom:14px;">
                 📊 {c['metrics']}
             </div>
+            <button onclick="window.location.href='{c['route']}'"
+                style="background:#2563eb;color:white;border:none;padding:8px 0;width:100%;
+                       border-radius:7px;font-size:0.85rem;font-weight:600;cursor:pointer;">
+                Enter Challenge →
+            </button>
         </div>"""
     else:
         return f"""
         <div style="border:2px solid #e5e7eb;border-radius:12px;padding:24px;
-                    background:#f9fafb;opacity:0.6;height:100%;">
-            <div style="font-size:2.2rem;margin-bottom:8px;">{c['emoji']}</div>
-            <h3 style="margin:0 0 8px 0;color:#6b7280;font-size:1.05rem;">{c['title']}</h3>
-            <p style="margin:0 0 12px 0;color:#9ca3af;font-size:0.88rem;line-height:1.5;">{c['description']}</p>
-            <div style="background:#f3f4f6;border-radius:6px;padding:5px 10px;
-                        font-size:0.75rem;color:#9ca3af;font-family:monospace;">
+                    background:#f9fafb;display:flex;flex-direction:column;height:260px;box-sizing:border-box;opacity:0.55;">
+            <div style="font-size:2rem;margin-bottom:8px;">{c['emoji']}</div>
+            <h3 style="margin:0 0 6px 0;color:#6b7280;font-size:1rem;font-weight:700;">{c['title']}</h3>
+            <p style="margin:0 0 10px 0;color:#9ca3af;font-size:0.82rem;line-height:1.45;flex:1;">{c['description']}</p>
+            <div style="background:#f3f4f6;border-radius:5px;padding:4px 8px;
+                        font-size:0.72rem;color:#9ca3af;font-family:monospace;margin-bottom:14px;">
                 📊 {c['metrics']}
             </div>
-            <div style="margin-top:14px;">
-                <span style="background:#e5e7eb;color:#6b7280;padding:7px 16px;
-                      border-radius:6px;font-size:0.85rem;font-weight:600;">
-                    🔒 Coming Soon
-                </span>
-            </div>
+            <button disabled
+                style="background:#e5e7eb;color:#9ca3af;border:none;padding:8px 0;width:100%;
+                       border-radius:7px;font-size:0.85rem;font-weight:600;cursor:not-allowed;">
+                🔒 Coming Soon
+            </button>
         </div>"""
 
 
@@ -519,11 +523,8 @@ with gr.Blocks() as demo:
     )
     with gr.Row(equal_height=True):
         for c in CHALLENGES:
-            with gr.Column():
+            with gr.Column(scale=1):
                 gr.HTML(_challenge_card_html(c))
-                if c["active"]:
-                    btn = gr.Button(f"Enter {c['title']} →", variant="primary", size="sm")
-                    btn.click(None, js=f"() => {{ window.location.href = '{c['route']}'; }}")
 
     gr.Markdown(
         "---\n*More challenges coming soon. "