unsloth/tests/studio/test_chat_thinking_compact_layout.py
Michael Han 8aaf2f78eb
Studio: drive UI font size through a typography scale instead of the root font size (#7359)
* Studio: drive UI font size through a typography scale, not the root font size

Follow up to #7355. The preference now writes --ui-font-scale
(selected / 16) and a data-ui-font-size attribute on the root instead
of mutating the root font size, and the applier clears any stale inline
root font-size left by older builds. Because the rem base never moves,
every layout-only rem-to-px conversion from #7355 is reverted to its
original form: the spacing, radius and container tokens, sidebar and
thread widths, grid tracks, calc margins and hub.css dimensions match
pre-#7355 main again, which also restores rem-based accessibility
scaling for users with a larger browser default font size.

Typography scales through tokens in index.css, all exact at 16px:

- The named Tailwind sizes (--text-xs through --text-4xl) multiply
  their defaults by the scale, so standard utilities scale
- One token per design px size (--text-ui-8 ... --text-ui-34) replaces
  every arbitrary text-[Npx] class; leading-ui-* mirrors the exact
  line heights and the numeric --leading-3..10 scale as well
- CSS font-size and line-height declarations multiply by the scale
- Chart labels scale through a .recharts-text rule; streamdown and
  react-flow px text is re-based via scaled overrides; KaTeX's 1px
  layout trick stays fixed by design
- The logo lockups keep their half-rate behavior via the scale var
- The explicit Code font size remains unmultiplied

Keeps the #7355 behavior fixes: color chip min width, voice select
min/max widths, and the select and dropdown menus scrolling an inner
viewport so their corners stay rounded. The whitespace-password and
IME rename guards that merged alongside are preserved.

* Studio: contract and Playwright coverage for the UI font size scale

test_ui_font_scale_contract.py pins the mechanism (scale var written,
root font size never mutated, tokens scaled, code font size not
multiplied, the Radix select viewport owning scroll state) and guards
against new raw pixel typography, with a documented allowlist for the
recharts fontSize props covered by the stylesheet override and the
offscreen clipboard textarea.

playwright_ui_font_scale.py drives the real appearance controls: root
font size fixed at 12/16/20, text and line height scale by size/16,
sidebar width invariant, explicit code font size stays fixed, an
overflowing dictation select scrolls its Radix viewport by keyboard
and wheel, and the default restores exactly. Wired into the UI smoke
workflow against the second studio boot.

The thinking-compact and descender contracts move back to the rem and
token forms now that layout values no longer need px pinning.
2026-07-23 01:26:56 -07:00

33 lines
1.3 KiB
Python

"""Responsive contract for the composer Thinking control."""
from pathlib import Path
REPO = Path(__file__).resolve().parents[2]
THREAD_TSX = REPO / "studio/frontend/src/components/assistant-ui/thread.tsx"
SHARED_TSX = REPO / "studio/frontend/src/features/chat/shared-composer.tsx"
INDEX_CSS = REPO / "studio/frontend/src/index.css"
def test_thinking_control_has_compact_hooks_in_both_composers():
for path in (THREAD_TSX, SHARED_TSX):
source = path.read_text(encoding = "utf-8")
assert 'className="unsloth-thinking-label"' in source
assert "unsloth-thinking-caret size-[15px]" in source
assert 'data-pill-label="Thinking settings"' in source
def test_narrow_composer_collapses_thinking_to_the_bulb():
css = INDEX_CSS.read_text(encoding = "utf-8")
# Query the composer width instead of the full viewport.
assert css.count("container-type: inline-size;") >= 2
compact_start = css.index("@container (max-width: 36rem)")
compact_end = css.index("/* Smaller tick", compact_start)
compact_rule = css[compact_start:compact_end]
assert ".unsloth-thinking-pill" in compact_rule
assert "@apply size-8" in compact_rule
assert ".unsloth-thinking-label" in compact_rule
assert ".unsloth-thinking-caret" in compact_rule
assert "display: none;" in compact_rule