update UI

app.py

@@ -195,7 +195,7 @@ def _render_info_panels(group: dict) -> None:
                 gr.Markdown(group["ranking"], elem_classes="markdown-text")
 
 
-def _render_submit_section(task_names: list[str], page_title: str) -> None:
+def _render_submit_section(task_names: list[str], page_title: str, group_slug: str) -> None:
     submit_enabled = bool(task_names)
     multiple_tasks = len(task_names) > 1
     if submit_enabled:
@@ -217,8 +217,8 @@ def _render_submit_section(task_names: list[str], page_title: str) -> None:
             display_input = gr.Textbox(
                 show_label=False,
                 placeholder="Awesome Team",
-                elem_classes="clean-input",
-                elem_id="submit-display-name",
+                elem_classes=["clean-input", "submit-display-name"],
+                elem_id=f"{group_slug}-submit-display-name",
                 container=False,
                 interactive=submit_enabled,
             )
@@ -230,16 +230,16 @@ def _render_submit_section(task_names: list[str], page_title: str) -> None:
                     choices=task_choices,
                     value=default_task,
                     interactive=True,
-                    elem_classes="clean-input",
-                    elem_id="submit-subtask",
+                    elem_classes=["clean-input", "submit-subtask"],
+                    elem_id=f"{group_slug}-submit-subtask",
                     container=False,
                 )
             else:
                 task_input = gr.Textbox(
                     show_label=False,
                     value=task_display_name,
-                    elem_classes="clean-input",
-                    elem_id="submit-subtask",
+                    elem_classes=["clean-input", "submit-subtask"],
+                    elem_id=f"{group_slug}-submit-subtask",
                     container=False,
                     interactive=False,
                 )
@@ -250,8 +250,8 @@ def _render_submit_section(task_names: list[str], page_title: str) -> None:
             dataset_input = gr.Textbox(
                 show_label=False,
                 placeholder="userA/my-results",
-                elem_classes="clean-input",
-                elem_id="submit-user-dataset",
+                elem_classes=["clean-input", "submit-user-dataset"],
+                elem_id=f"{group_slug}-submit-user-dataset",
                 container=False,
                 interactive=submit_enabled,
             )
@@ -262,8 +262,8 @@ def _render_submit_section(task_names: list[str], page_title: str) -> None:
                 "Submit",
                 variant="primary",
                 size="lg",
-                elem_classes="primary-action",
-                elem_id="submit-action-button",
+                elem_classes=["primary-action", "submit-action-button"],
+                elem_id=f"{group_slug}-submit-action-button",
                 interactive=submit_enabled,
             )
         with gr.Column(scale=1):
@@ -278,7 +278,7 @@ def _render_submit_section(task_names: list[str], page_title: str) -> None:
     return display_input, task_input, dataset_input, submit_button, submit_message
 
 
-def _render_queue_section(task_names: list[str]) -> gr.components.Component | None:
+def _render_queue_section(task_names: list[str], group_slug: str) -> gr.components.Component | None:
     submit_enabled = bool(task_names)
     _section_divider()
 
@@ -292,8 +292,8 @@ def _render_queue_section(task_names: list[str]) -> gr.components.Component | No
             refresh_queue = gr.Button(
                 "Refresh",
                 size="sm",
-                elem_classes="secondary-action",
-                elem_id="queue-refresh-button",
+                elem_classes=["secondary-action", "queue-refresh-button"],
+                elem_id=f"{group_slug}-queue-refresh-button",
                 interactive=submit_enabled,
             )
 
@@ -444,9 +444,9 @@ with gr.Blocks(
                     _render_intro(group)
                     _render_info_panels(group)
                     display_input, task_input, dataset_input, submit_button, submit_message = _render_submit_section(
-                        group["tasks"], group["title"]
+                        group["tasks"], group["title"], group["slug"]
                     )
-                    queue_table = _render_queue_section(group["tasks"])
+                    queue_table = _render_queue_section(group["tasks"], group["slug"])
                     _render_subtasks(group["tasks"], group["title"])
                     _wire_submit_if_available(
                         group["tasks"],

src/display/css_html_js.py

@@ -29,10 +29,12 @@ code, pre, kbd, samp, textarea {
 }
 
 .gradio-container {
+    width: 100% !important;
     max-width: var(--page-max) !important;
     margin: 0 auto !important;
-    padding: 12px 0 40px 0 !important;
+    padding: 10px 0 32px 0 !important;
     color: var(--ink-1);
+    box-sizing: border-box !important;
     scrollbar-gutter: stable both-edges;
 }
 
@@ -46,7 +48,6 @@ code, pre, kbd, samp, textarea {
 .gradio-container [role="tabpanel"] {
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     box-sizing: border-box !important;
 }
 
@@ -61,14 +62,12 @@ code, pre, kbd, samp, textarea {
 #tab-motion_transfer {
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     box-sizing: border-box !important;
 }
 
 .task-page-shell {
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     background: transparent !important;
@@ -85,15 +84,6 @@ code, pre, kbd, samp, textarea {
     background: transparent !important;
 }
 
-#task-page-video_generation,
-#task-page-video_generation > div {
-    width: 100% !important;
-    max-width: 100% !important;
-    min-width: 100% !important;
-    display: block !important;
-    flex: 1 1 100% !important;
-}
-
 .gradio-container,
 .gradio-container .prose,
 .gradio-container .prose * {
@@ -117,7 +107,7 @@ code, pre, kbd, samp, textarea {
 
 .markdown-text {
     font-size: 16px !important;
-    line-height: 1.75 !important;
+    line-height: 1.6 !important;
     color: var(--ink-2) !important;
 }
 
@@ -127,8 +117,8 @@ code, pre, kbd, samp, textarea {
 }
 
 .hero-block {
-    padding: 10px 0 24px 0;
-    margin-bottom: 18px;
+    padding: 8px 0 18px 0;
+    margin-bottom: 12px;
     border-bottom: 1px solid var(--line-1);
 }
 
@@ -138,7 +128,7 @@ code, pre, kbd, samp, textarea {
 
 .hero-eyebrow {
     display: inline-block;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
     color: var(--brand);
     font-size: 13px;
     font-weight: 700;
@@ -147,7 +137,7 @@ code, pre, kbd, samp, textarea {
 }
 
 .hero-title {
-    margin: 0 0 10px 0;
+    margin: 0 0 8px 0;
     color: var(--ink-1);
     font-size: 34px;
     line-height: 1.15;
@@ -156,15 +146,15 @@ code, pre, kbd, samp, textarea {
 
 .hero-text {
     margin: 0;
-    max-width: 980px;
+    max-width: 1040px;
     color: var(--ink-2);
-    font-size: 17px;
-    line-height: 1.82;
+    font-size: 16px;
+    line-height: 1.65;
     font-weight: 400;
 }
 
 .hero-meta {
-    margin-top: 12px;
+    margin-top: 10px;
     color: var(--ink-3);
     font-size: 14px;
     line-height: 1.65;
@@ -172,7 +162,7 @@ code, pre, kbd, samp, textarea {
 }
 
 .section-header {
-    margin: 16px 0 8px 0;
+    margin: 14px 0 8px 0;
 }
 
 .section-header h3 {
@@ -187,20 +177,19 @@ code, pre, kbd, samp, textarea {
     margin: 4px 0 0 0;
     color: var(--ink-3);
     font-size: 14px;
-    line-height: 1.65;
+    line-height: 1.5;
 }
 
 .section-divider {
     height: 1px;
-    margin: 14px 0 8px 0;
+    margin: 16px 0 10px 0;
     background: linear-gradient(90deg, var(--line-1), rgba(219, 227, 239, 0));
 }
 
 .info-panels-row {
-    margin-bottom: 6px;
+    margin: 10px 0 6px 0;
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     display: flex !important;
     align-items: stretch !important;
 }
@@ -228,16 +217,19 @@ code, pre, kbd, samp, textarea {
 }
 
 .form-row {
-    margin-top: 0;
+    margin: 10px 0 12px 0 !important;
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     display: flex !important;
+    gap: 20px !important;
+    align-items: flex-end !important;
 }
 
 .form-row > div {
     flex: 1 1 0 !important;
     min-width: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .form-row-single > div {
@@ -245,12 +237,17 @@ code, pre, kbd, samp, textarea {
 }
 
 .submit-action-row {
-    margin-top: 6px;
-    align-items: center;
+    margin: 12px 0 0 0 !important;
+    align-items: center !important;
+}
+
+.submit-action-row > div {
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .queue-head-row {
-    margin-top: 6px;
+    margin-top: 4px;
     align-items: end;
 }
 
@@ -263,7 +260,7 @@ code, pre, kbd, samp, textarea {
 }
 
 .field-label-wide {
-    margin-top: 6px;
+    margin-top: 0;
 }
 
 .clean-input,
@@ -277,16 +274,12 @@ code, pre, kbd, samp, textarea {
 .clean-input .label-wrap,
 .clean-input .single-select,
 .clean-input .dropdown,
-.clean-input .dropdown > div,
-#submit-display-name,
-#submit-subtask,
-#submit-user-dataset,
-#submit-display-name > div,
-#submit-subtask > div,
-#submit-user-dataset > div {
+.clean-input .dropdown > div {
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .clean-input input,
@@ -296,30 +289,23 @@ code, pre, kbd, samp, textarea {
 .clean-input .wrap-inner > textarea,
 .clean-input .single-select,
 .clean-input .dropdown .wrap-inner,
-.clean-input .dropdown .secondary-wrap,
-#submit-display-name input,
-#submit-user-dataset input,
-#submit-subtask input,
-#submit-subtask .wrap-inner,
-#submit-subtask .secondary-wrap,
-#submit-subtask .single-select {
-    background: transparent !important;
+.clean-input .dropdown .secondary-wrap {
+    background: #ffffff !important;
     border-radius: 12px !important;
     border: 1px solid var(--line-2) !important;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
 }
 
-#submit-display-name input,
-#submit-user-dataset input,
-#submit-subtask .wrap-inner,
-#submit-subtask .single-select,
-#submit-subtask .secondary-wrap {
+.clean-input input,
+.clean-input textarea,
+.clean-input .wrap-inner,
+.clean-input .single-select,
+.clean-input .secondary-wrap {
     min-height: 48px !important;
     height: 48px !important;
 }
 
-#submit-display-name,
-#submit-subtask,
-#submit-user-dataset {
+.clean-input {
     margin: 0 !important;
     padding: 0 !important;
     min-height: 48px !important;
@@ -328,36 +314,21 @@ code, pre, kbd, samp, textarea {
     max-width: 100% !important;
 }
 
-#submit-subtask button,
-#submit-subtask span,
-#submit-subtask label,
-#submit-subtask .token,
-#submit-subtask [data-testid],
-#submit-subtask [class*="label"] {
-    background: transparent !important;
-}
-
-#submit-subtask input {
+.submit-subtask button,
+.submit-subtask span,
+.submit-subtask label,
+.submit-subtask .token,
+.submit-subtask [data-testid],
+.submit-subtask [class*="label"] {
     background: transparent !important;
-    border: 1px solid var(--line-2) !important;
-    border-radius: 12px !important;
-    min-height: 48px !important;
-    height: 48px !important;
 }
 
-#submit-display-name *,
-#submit-subtask *,
-#submit-user-dataset * {
-    background-color: transparent !important;
-    box-shadow: none !important;
-}
-
-#submit-display-name input,
-#submit-user-dataset input,
-#submit-subtask .wrap-inner,
-#submit-subtask .single-select,
-#submit-subtask .secondary-wrap {
-    background: transparent !important;
+.clean-input input:disabled,
+.clean-input textarea:disabled,
+.clean-input [disabled] {
+    opacity: 1 !important;
+    color: var(--ink-1) !important;
+    -webkit-text-fill-color: var(--ink-1) !important;
 }
 
 .submit-placeholder-note {
@@ -368,8 +339,8 @@ code, pre, kbd, samp, textarea {
 
 .primary-action,
 .primary-action button,
-#submit-action-button,
-#submit-action-button button {
+.submit-action-button,
+.submit-action-button button {
     min-width: 220px;
     width: 220px !important;
     border-radius: 12px !important;
@@ -377,8 +348,8 @@ code, pre, kbd, samp, textarea {
 
 .secondary-action,
 .secondary-action button,
-#queue-refresh-button,
-#queue-refresh-button button {
+.queue-refresh-button,
+.queue-refresh-button button {
     width: auto !important;
     min-width: 120px;
     border-radius: 10px !important;
@@ -386,14 +357,14 @@ code, pre, kbd, samp, textarea {
 
 button.primary,
 .primary-action button,
-#submit-action-button button {
+.submit-action-button button {
     background: var(--brand) !important;
     border-color: var(--brand) !important;
 }
 
 button.primary:hover,
 .primary-action button:hover,
-#submit-action-button button:hover {
+.submit-action-button button:hover {
     background: var(--brand-dark) !important;
     border-color: var(--brand-dark) !important;
 }
@@ -412,7 +383,6 @@ button.primary:hover,
 .empty-task-note {
     width: 100% !important;
     max-width: 100% !important;
-    min-width: 100% !important;
     display: block !important;
     margin: 10px 0 !important;
     padding: 14px 16px !important;