Studio: Fix clipped model selector text descenders (#5210)

* fix: clipped model selector text descenders

* Studio: Fix image-only chat requests failing validation (#5212)

* fix: allow image-only chat messages

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* test: deduplicate empty content validation coverage

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

* Fix descender clipping in sidebar user account section

Replace `leading-none` with `leading-tight` on the parent div wrapping
`displayTitle` and the "Studio" label inside `SidebarMenuButton`. The
child spans use `truncate` (overflow: hidden), so `line-height: 1`
clipped descenders (g, p, q, y, j) on user names. Same root cause and
fix as the model selector trigger.

* Add tests for studio text descender clipping

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Daniel Han <danielhanchen@gmail.com>

studio/frontend/src/components/app-sidebar.tsx

@@ -527,7 +527,7 @@ export function AppSidebar() {
                       className="!size-8"
                     />
                   </div>
-                  <div className="flex flex-col gap-0.5 leading-none group-data-[collapsible=icon]:hidden">
+                  <div className="flex flex-col gap-0.5 leading-tight group-data-[collapsible=icon]:hidden">
                     <span className="truncate font-heading text-[13px] tracking-[0.02em] font-semibold text-[#383835] dark:text-[#c7c7c4]">{displayTitle}</span>
                     <span className="truncate text-[11px] tracking-[0.01em] text-muted-foreground">Studio</span>
                   </div>

studio/frontend/src/components/assistant-ui/model-selector.tsx

@@ -81,7 +81,7 @@ function ModelSelectorTrigger({
           <span className="size-2 shrink-0 rounded-full bg-emerald-500" />
         )}
         <span className="flex min-w-0 flex-1 items-baseline gap-2">
-          <span className="min-w-0 flex-1 truncate font-heading text-[16px] font-medium leading-none text-black dark:text-white">
+          <span className="min-w-0 flex-1 truncate font-heading text-[16px] font-medium leading-tight text-black dark:text-white">
             {currentModel?.name ?? "Select model"}
           </span>
           {currentModel?.description && (

tests/studio/test_studio_text_descender_clipping.py

@@ -0,0 +1,69 @@
+"""
+Regression guard: descender-prone text spans in Studio must not pair
+`leading-none` with `truncate` (overflow: hidden), which clips glyph
+descenders (g, p, q, y, j) in real user-visible labels.
+"""
+
+from __future__ import annotations
+
+import re
+from pathlib import Path
+
+
+WORKDIR = Path(__file__).resolve().parents[2]
+MODEL_SELECTOR = (
+    WORKDIR
+    / "studio"
+    / "frontend"
+    / "src"
+    / "components"
+    / "assistant-ui"
+    / "model-selector.tsx"
+)
+APP_SIDEBAR = WORKDIR / "studio" / "frontend" / "src" / "components" / "app-sidebar.tsx"
+
+
+def _read(path: Path) -> str:
+    assert path.exists(), f"missing source file: {path}"
+    return path.read_text()
+
+
+def test_model_selector_trigger_label_uses_leading_tight():
+    src = _read(MODEL_SELECTOR)
+    pattern = re.compile(
+        r'<span\s+className="[^"]*\bmin-w-0\b[^"]*\bflex-1\b[^"]*\btruncate\b[^"]*\bfont-heading\b[^"]*\btext-\[16px\][^"]*"',
+    )
+    matches = pattern.findall(src)
+    assert matches, "could not find ModelSelectorTrigger model-name span"
+    for cls in matches:
+        assert "leading-tight" in cls, f"expected leading-tight, got: {cls}"
+        assert (
+            "leading-none" not in cls
+        ), f"leading-none must not coexist with truncate here: {cls}"
+
+
+def test_sidebar_account_block_uses_leading_tight():
+    src = _read(APP_SIDEBAR)
+    pattern = re.compile(
+        r'<div\s+className="flex\s+flex-col\s+gap-0\.5\s+(\S+)\s+group-data-\[collapsible=icon\]:hidden">',
+    )
+    matches = pattern.findall(src)
+    assert matches, "could not find sidebar account-block parent div"
+    leading_classes = [m for m in matches if m.startswith("leading-")]
+    assert (
+        leading_classes
+    ), f"no leading-* class on sidebar account-block parent: {matches}"
+    for cls in leading_classes:
+        assert (
+            cls == "leading-tight"
+        ), f"sidebar account-block must use leading-tight, got: {cls}"
+
+
+def test_no_truncate_plus_leading_none_in_changed_files():
+    for path in (MODEL_SELECTOR, APP_SIDEBAR):
+        src = _read(path)
+        for line in src.splitlines():
+            if "truncate" in line and "leading-none" in line:
+                raise AssertionError(
+                    f"{path.name}: same line uses truncate + leading-none, descenders will clip: {line.strip()}"
+                )