Submission page agent tooltips (#22)

content.py

@@ -317,19 +317,24 @@ html:not(.dark) #legend-markdown .light-mode-icon,
     bottom: 125%;
     background-color: #105257;
     color: #fff;
-    padding: 0px 10px 10px;
+    padding: 0px 10px 15px;
     border-radius: 4px;
     font-size: 12px;
     opacity: 0;
     transition: opacity 0.2s;
     white-space: pre-line;
     width: max-content;
-    max-width: 350px; /* Limit width for better readability */
     text-align: left;
     pointer-events: none;
+    max-width: 300px;
     left: 50%;
     transform: translateX(-50%);
-    z-index: 1000; 
+    z-index: 1000;
+}
+@media (max-width: 768px) {
+    .tooltip-icon::after {
+        max-width: 250px;
+    }
 }
 .tooltip-icon:hover::after {
     opacity: 1;
@@ -385,4 +390,36 @@ html:not(.dark) #legend-markdown .light-mode-icon,
     grid-row: 2 !important;
     grid-column: 1 / -1 !important;
 }
+/*------ Submission Page CSS ------*/
+#custom-form-group {
+    border: 1px solid #000 !important; 
+    border-radius: 4px !important;
+    padding: 16px 16px 0px 0px !important;
+    overflow: visible !important;    
+}
+
+#openness-label-html,
+#agent-tooling-label-html {
+    padding-left: 12px;
+}
+
+#custom-form-group fieldset {
+    padding-top: 0px !important;
+}
+
+#agent-tooling-label-html {
+    padding-top: 6px;
+}
+
+#custom-form-group,
+.styler {
+    background: none;
+}
+
+/*------ This specific styles allows openness label tooltips to be visible ------*/
+.styler,
+#openness-label-html,
+#agent-tooling-label-html {
+    overflow: visible !important;
+}
 """

submission.py

@@ -281,6 +281,32 @@ def add_new_eval(
         "Please refresh the leaderboard in a few moments. It may take some time for changes to propagate."
     )
 
+openness_label_html = """
+<div class="form-label-with-tooltip">
+    Openness of Agent
+    <span class="tooltip-icon" data-tooltip="
+        • Closed: No API or code available
+        • API Available: API available, but no code
+        • Open Source: Code available, but no weights
+        • Open Source + Open Weights: Code and weights available"
+    >
+        ⓘ
+    </span>
+</div>
+"""
+
+agent_tooling_label_html = """
+<div class="form-label-with-tooltip">
+    Agent Tooling
+    <span class="tooltip-icon" data-tooltip="
+        • Standard: Only uses tools explicitly provided in state.tools
+        • Equivalent: Uses custom tools with identical or more restricted capabilities
+        • Fully Custom: Uses tools beyond constraints of Standard or Equivalent"
+    >
+        ⓘ
+    </span>
+</div>
+"""
 
 # --- Submission Accordion ---
 def build_page():
@@ -291,8 +317,11 @@ def build_page():
             agent_name_tb = gr.Textbox(label="Agent Name")
             agent_desc_tb = gr.Textbox(label="Agent Description")
             agent_url_tb = gr.Textbox(label="URL to Agent Information")
-            openness_radio = gr.Radio(["Open Source","Open Source Open Weights", "API Available", "Closed"], value=None, label="Openness of Agent")
-            degree_of_control_radio = gr.Radio(["Standard","Custom with Standard Search", "Fully Custom"], value=None, label="Agent Tooling")
+            with gr.Group(elem_id="custom-form-group"):
+                gr.HTML(value=openness_label_html, elem_id="openness-label-html")
+                openness_radio = gr.Radio(["Open Source","Open Source Open Weights", "API Available", "Closed"], value=None, label="")
+                gr.HTML(value=agent_tooling_label_html, elem_id="agent-tooling-label-html")
+                degree_of_control_radio = gr.Radio(["Standard","Equivalent", "Fully Custom"], value=None, label="")
         with gr.Column():
             username_tb = gr.Textbox(label="Organization or User Name (Defaults to HF username)")
             mail_tb = gr.Textbox(label="Contact Email (Private, for submission issues)")

ui_components.py

@@ -162,7 +162,7 @@ legend_markdown = f"""
         
     <div> <!-- Container for the Pareto section -->
         <b>Pareto</b><span class="tooltip-icon" data-tooltip="
-        •Pareto: Indicates if agent is on the Pareto frontier
+        Indicates if agent is on the Pareto frontier
         ">ⓘ</span>
         <div style="padding-top: 4px;"><span>🏆 On frontier</span></div>
     </div>