Update challenges/home.py

challenges/home.py

@@ -33,11 +33,12 @@ CHALLENGES = [
 ]
 
 
-def _challenge_card_html(c: dict) -> str:
+def _single_card_html(c: dict) -> str:
     if c["active"]:
         return f"""
         <div style="border:2px solid #2563eb;border-radius:12px;padding:24px;
-                    background:#f0f7ff;display:flex;flex-direction:column;height:260px;box-sizing:border-box;">
+                    background:#f0f7ff;display:flex;flex-direction:column;
+                    height:100%;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>
@@ -54,7 +55,8 @@ def _challenge_card_html(c: dict) -> str:
     else:
         return f"""
         <div style="border:2px solid #e5e7eb;border-radius:12px;padding:24px;
-                    background:#f9fafb;display:flex;flex-direction:column;height:260px;box-sizing:border-box;opacity:0.55;">
+                    background:#f9fafb;display:flex;flex-direction:column;
+                    height:100%;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>
@@ -70,6 +72,23 @@ def _challenge_card_html(c: dict) -> str:
         </div>"""
 
 
+def _all_cards_html(challenges: list) -> str:
+    cards = "".join(_single_card_html(c) for c in challenges)
+    return f"""
+    <div style="
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 4px 0;
+        align-items: stretch;
+    ">
+        {cards}
+    </div>
+    """
+
+
 def build_home(demo: gr.Blocks) -> None:
     with gr.Row():
         with gr.Column(scale=5):
@@ -87,13 +106,11 @@ def build_home(demo: gr.Blocks) -> None:
     gr.Markdown(
         "Choose a challenge to view its leaderboard, submit predictions, and track your results."
     )
-    with gr.Row(equal_height=True):
-        for c in CHALLENGES:
-            with gr.Column(scale=1):
-                gr.HTML(_challenge_card_html(c))
+
+    gr.HTML(_all_cards_html(CHALLENGES))
 
     gr.Markdown(
         "---\n*More challenges coming soon. "
         "All challenges use HuggingFace OAuth — log in once to access everything.*"
     )
-    demo.load(get_user_greeting, outputs=[home_greeting])
+    demo.load(get_user_greeting, outputs=[home_greeting])