Refine task form controls

python-tools/static/style.css

@@ -61,15 +61,18 @@ a {
   align-items: end;
   display: grid;
   gap: .75rem;
-  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
+  grid-template-columns: minmax(20rem, 1fr) auto;
   min-width: 0;
 }
 
-.task-input {
+.task-options {
-  margin: 0;
+  display: grid;
+  gap: .75rem;
   min-width: 0;
 }
 
+.task-input { margin: 0; }
+
 .task-input label,
 .task-input fieldset label {
   display: block;
@@ -110,22 +113,31 @@ button {
 }
 
 .task-action {
-  align-items: stretch;
+  justify-self: end;
-  border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent);
-  display: flex;
-  gap: .4rem;
-  grid-column: -1;
-  grid-row: 1;
-  margin-left: .25rem;
-  padding-left: .75rem;
 }
 
-.task-action select,
+.split-button {
-.task-action button {
+  display: inline-flex;
+}
+
+.split-button select,
+.split-button button,
+.task-action > button {
   margin: 0;
   white-space: nowrap;
 }
 
+.split-button select {
+  border-bottom-right-radius: 0;
+  border-right: 0;
+  border-top-right-radius: 0;
+}
+
+.split-button button {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
 .visually-hidden {
   height: 1px;
   margin: -1px;
@@ -179,11 +191,11 @@ button:disabled {
 
 @media (max-width: 42rem) {
   .task-form {
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: 1fr;
   }
 
   .task-action {
-    grid-column: 2;
+    justify-self: start;
   }
 }
 

python-tools/templates/index.html

@@ -40,6 +40,7 @@
             <form class="task-form" method="post" action="{{ url_for('run_task', task_id=task.id) }}" enctype="multipart/form-data"{% if task.wait_for_result %} data-wait-for-result{% endif %}{% if task.download_artifacts %} data-download-artifacts{% endif %}>
               {% set values = form_values.get(task.id, {}) %}
               {% set errors = input_errors.get(task.id, {}) %}
+              <div class="task-options">
               {% for field in task.inputs %}
                 {% if not task.execution or field.name != task.execution.field.name %}
                 <div class="task-input">
@@ -88,8 +89,10 @@
                 </div>
                 {% endif %}
               {% endfor %}
+              </div>
               <div class="task-action">
                 {% if task.execution %}
+                  <div class="split-button">
                   {% set execution = task.execution.field %}
                   {% set selected = values.get(execution.name, execution.default) %}
                   <label class="visually-hidden" for="{{ task.id|replace('/', '-') }}-{{ execution.name }}">Run mode</label>
@@ -98,12 +101,18 @@
                       <option value="{{ option.value }}" {% if option.value == selected %}selected{% endif %}>{{ option.label }}</option>
                     {% endfor %}
                   </select>
-                {% endif %}
                   <button type="submit">
-                  <span class="button-label">{{ task.execution.field.options[0].label if task.execution else "Run" }}</span>
+                    <span class="button-label">{{ task.execution.field.options[0].label }}</span>
                     {% if task.wait_for_result %}<span class="spinner" aria-hidden="true"></span>{% endif %}
                   </button>
                   </div>
+                {% else %}
+                  <button type="submit">
+                    <span class="button-label">Run</span>
+                    {% if task.wait_for_result %}<span class="spinner" aria-hidden="true"></span>{% endif %}
+                  </button>
+                {% endif %}
+              </div>
               {% if task.wait_for_result %}<p class="task-result" aria-live="polite"></p>{% endif %}
             </form>
           </li>

python-tools/tests/test_web.py

@@ -231,6 +231,7 @@ print(Path(os.environ["SERVER_MAINTENANCE_INPUT"]).read_text())
     assert b"Report only" in page.data
     assert b"Apply changes" in page.data
     assert b"data-execution-mode" in page.data
+    assert b'class="split-button"' in page.data
     response = client.post("/tasks/examples/migrate.py/run")
     run_id = int(response.headers["Location"].rsplit("/", 1)[1])
     deadline = time.monotonic() + 3