Refine target tabs and translator alignment

app.py

@@ -375,6 +375,8 @@ def render_target_tabs(
             classes.append("loading")
         if language in completed_set:
             classes.append("complete")
+        else:
+            classes.append("unavailable")
         safe_language = html.escape(language, quote=True)
         status = (
             '<span class="tab-spinner" aria-hidden="true"></span>'
@@ -391,6 +393,10 @@ def render_target_tabs(
             f'aria-selected="{str(language == active).lower()}">'
             f"<span>{safe_language}</span>{status}</button>"
         )
+    tabs.append(
+        '<button type="button" class="target-add" data-target-add '
+        'aria-label="Add target languages">+</button>'
+    )
     return f'<div class="target-tabs" role="tablist">{"".join(tabs)}</div>'
 
 
@@ -658,6 +664,9 @@ APP_JS = """
     const tab = event.target.closest("[data-target-tab]");
     if (tab) sendValue("target-tab-bridge", tab.dataset.targetTab);
 
+    const addTarget = event.target.closest("[data-target-add]");
+    if (addTarget) sendValue("target-add-bridge", String(Date.now()));
+
     const example = event.target.closest("[data-example-index]");
     if (example) sendValue("example-bridge", example.dataset.exampleIndex);
   });
@@ -746,14 +755,6 @@ def build_demo() -> gr.Blocks:
                             ),
                             elem_id="target-tabs-shell",
                         )
-                        target_add = gr.Button(
-                            "+",
-                            variant="secondary",
-                            size="sm",
-                            scale=0,
-                            min_width=40,
-                            elem_id="target-add-button",
-                        )
                         target_picker = gr.CheckboxGroup(
                             choices=SUPPORTED_LANGUAGES,
                             value=list(DEFAULT_TARGETS),
@@ -794,6 +795,12 @@ def build_demo() -> gr.Blocks:
                 container=False,
                 elem_id="target-tab-bridge",
             )
+            target_add_bridge = gr.Textbox(
+                value="",
+                show_label=False,
+                container=False,
+                elem_id="target-add-bridge",
+            )
             example_bridge = gr.Textbox(
                 value="",
                 show_label=False,
@@ -816,7 +823,7 @@ def build_demo() -> gr.Blocks:
             queue=False,
         )
 
-        target_add.click(
+        target_add_bridge.change(
             fn=lambda open_value: toggle_picker(open_value, "target"),
             inputs=target_open,
             outputs=[target_picker, target_open],

style.css

@@ -119,8 +119,7 @@ footer {
   z-index: 30;
 }
 
-#source-language-button,
-#target-add-button {
+#source-language-button {
   width: max-content;
   min-width: 0 !important;
   border: 0 !important;
@@ -135,8 +134,7 @@ footer {
   padding: 7px 10px !important;
 }
 
-#source-language-button:hover,
-#target-add-button:hover {
+#source-language-button:hover {
   background: var(--marble-200) !important;
 }
 
@@ -195,17 +193,20 @@ footer {
 }
 
 #instructions-input {
+  height: 128px;
   min-height: 128px;
   border-radius: 22px !important;
 }
 
 #source-text-input {
+  height: 218px;
   min-height: 218px;
   border-radius: 24px !important;
 }
 
 #translation-output {
-  min-height: 400px;
+  height: 412px;
+  min-height: 412px;
   border-radius: 28px !important;
   background: #f0f2f3 !important;
 }
@@ -214,6 +215,7 @@ footer {
 #source-text-input textarea,
 #translation-output textarea {
   height: 100% !important;
+  min-height: 0 !important;
   padding: 18px 20px !important;
   border: 0 !important;
   background: transparent !important;
@@ -323,6 +325,15 @@ footer {
   opacity: 0.38;
 }
 
+.target-tab.unavailable {
+  opacity: 0.38;
+}
+
+.target-tab.unavailable:hover,
+.target-tab.unavailable.active {
+  opacity: 0.55;
+}
+
 .tab-spinner,
 .tab-check {
   display: inline-flex;
@@ -349,14 +360,27 @@ footer {
   height: 12px;
 }
 
-#target-add-button {
+.target-add {
+  display: inline-flex;
   flex: 0 0 36px;
+  align-items: center;
+  justify-content: center;
   width: 36px;
   height: 36px;
-  padding: 0 !important;
-  border-radius: 999px !important;
-  font-size: 21px !important;
-  font-weight: 400 !important;
+  margin-left: 2px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--volcanic-900);
+  cursor: pointer;
+  font-family: var(--sans);
+  font-size: 21px;
+  font-weight: 400;
+}
+
+.target-add:hover {
+  background: var(--marble-200);
 }
 
 /* Examples */
@@ -444,6 +468,7 @@ footer {
 }
 
 #target-tab-bridge,
+#target-add-bridge,
 #example-bridge {
   display: none !important;
 }
@@ -484,6 +509,7 @@ footer {
   }
 
   #translation-output {
+    height: 280px;
     min-height: 280px;
   }