A model menu that stays on the phone

Inside a chat the picker sits mid-bar with the panel buttons to its right,
and its menu opened from the picker's right edge -- at 390px it spanned
x = -132..226, cutting every model's name off. Below 48rem the bar is now
the containing block and the menu is pinned between its edges (capped at
24rem). Opening it on a touchscreen no longer focuses the filter, which
raised the keyboard over half the list.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tests/test_layout_bounds.py

@@ -208,3 +208,19 @@ def test_the_desktop_minimum_is_still_declared():
     for token in ("--terminal-width-min", "--canvas-width-min"):
         assert f"{token}:" in TOKENS
         assert f"var({token})" in APP_CSS
+
+
+def test_the_topbar_model_menu_belongs_to_the_bar_on_a_phone():
+    """1.8.3. Anchored to the picker, the menu opened `right: 0` of a button that
+    sits mid-bar with the panel buttons to its right, so on a 390px phone a 24rem
+    menu started 132px left of the screen and every model's name was cut off.
+
+    Below the phone breakpoint the picker gives up `position`, which makes the bar
+    the containing block, and the menu is pinned between the bar's two edges."""
+    body = _media_body(APP_CSS, "48rem")
+    assert re.search(r"\.topbar\s*\{\s*position:\s*relative", body)
+    assert re.search(r"\.topbar__actions \.picker\s*\{\s*position:\s*static", body)
+    menu = re.search(r"\.topbar__actions \.picker__menu\s*\{([^}]*)\}", body)
+    assert menu, "the topbar's menu is not placed on a phone"
+    for declaration in ("left:", "right:", "width: auto"):
+        assert declaration in menu.group(1), f"{declaration} missing from the phone menu"