Repository navigation
fix(studio): the api-name chip gives way before the item title (objectui#12791) - #12872
Merged
objectstack-fleet[bot] merged 4 commits intoOct 17, 2026
Merged
Conversation
…tui#12791) A long machine name kept its whole width (`shrink-0`) and cut the Studio item title to a few characters. The title and the chip now share the row in steps: the title gets 200 px, the chip 14 characters, then the title its whole text, then the chip its whole name, then the meta. On a row too narrow for both the chip truncates first, and the title goes below 200 px last with no overflow. A cut chip shows its full name in its tooltip, the status chip's mechanism. A Chromium geometry spec measures the widths. Claude-Session: https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952 Co-authored-by: Claude <noreply@anthropic.com>
…tui#12791) Adds the vitest pin beside the header (the chip keeps the whole name, its tooltip says it on hover and on focus, the identity order is unchanged) and the app-shell patch changeset. Claude-Session: https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952 Co-authored-by: Claude <noreply@anthropic.com>
…c (objectui#12791) Claude-Session: https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952 Co-authored-by: Claude <noreply@anthropic.com>
Contributor
✅ Console Performance Budget
The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it. 📦 Bundle Size Report
Size Limits
|
Contributor
Author
席位核对 — ACCEPT · objectui#12791 · head
|
| row | main 473e5a0 |
this branch |
|---|---|---|
| 560 px | 65.94 px ("Servi…") / whole | 233.66 px / cut |
| 736 px (1024 px viewport) | 261.94 px cut / whole | 284.41 px whole / cut |
| 360 px | 0 px, the row overflows by 28 px | 187 px / cut, no overflow |
Screenshots, read by the seat (light; never-merged claude/issue-12791-evidence at 7034312, PNGs only):
- at 560 px,
mainreads "Servi…" beside the whole machine name, and the branch reads "Service Territory Assign…" besideprobe_serv…; - at 1024 px the branch shows the whole title "Service Territory Assignment 105";
- at 360 px the branch still reads "Service Territory A…", with the chip at a few characters and the status chip folded to its icon.
Sent to the maintainer at 2026-10-17T09:09Z.
Tests:
e2e/studio-item-header-title-width.spec.ts(Chromium) bundles the realStudioItemHeaderfrom source with the real theme. 7 cases: the 560 px floor with the cut chip and its tooltip, the short-name and short-title CONTROLs, the 736 px and 1024 px CONTROLs, the kind chips staying whole, and no overflow at 360 px.StudioItemHeader.apiChip-12791.test.tsx: 5 cases, covering the whole name, the hover and focus tooltip, and the DOM order.- Ablations:
main's two token values put back turn 5 of 7 spec cases red, and the two CONTROLs stay green. Removing the tooltip turns 2 red, and swapping the order turns 1 red. Each was restored. - Gates: 237 studio-design and permission-matrix files (1700 tests) passed.
type-check,build, eslint,type-check:e2e,check:i18n-keys,check:i18n-drift, changeset presence andcheck:new-line-citationsall exit 0.
Changeset: @object-ui/app-shell patch; user-facing prose.
CI: running at this record. Landing waits for green.
Rulings
-
The four-step share: A, as built. The dispatch's strict "chip before title" order cut the short name
accountto one letter at 560 px with the card's long title, which fails the card's own acceptance 2. The four steps are:- the title gets 200 px (or its label);
- the chip gets 14 characters (or its name);
- the title grows to its label;
- the chip grows to its name.
This meets the card's floor and both CONTROLs, and below the bases the chip still shrinks first. The cost, a long chip keeping 14 characters while a long title above 200 px is still cut, is measured in the PR (270.63 of 284 px at 736 px with a kind chip) and accepted.
-
The degraded channel over
os-dev.md's write steps: A. The relay answers 403 in that container, and the dispatch names the substitute. -
The status text's 480 px threshold stays: A. The card's 560 px case holds 233.66 px live. A fold-before-the-floor rule would move a threshold ruling 7 kept, and nothing measured pulls for it.
-
The geometry spec follows
dashboard-metric-tile-height.spec.ts, bundling the real component, rather than the record header's class-string transcription. Accepted: it is the "real components bundled from source" the dispatch asked for.
Implemented-by: cloud session session_01Hi3YhZSf1g3MAVLbmNm952, branch claude/issue-12791-item-title-floor
Generated by Claude Code
Contributor
Author
CI red ·
|
…i#12791) CI's fallback font draws the title about 17% wider than the container that calibrated the spec, so the two CONTROLs that asserted one font's pixels failed there. They now read the steps from the browser, assert the row's rule from widths measured on the same page, and assert "whole" at the narrowest row that holds the item. Claude-Session: https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952 Co-authored-by: Claude <noreply@anthropic.com>
Contributor
✅ Console Performance Budget
The eager closure is every chunk the entry reaches through static imports — what the browser fetches and parses before the app renders. The entry chunk on its own is a small fraction of it. 📦 Bundle Size Report
Size Limits
|
Contributor
Author
Landing · head
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #12791
Clause-②: no
What changed
In Studio's item header the api-name chip was
shrink-0, so a long machine name kept its whole width and cut the item title to a few characters. Live on main, the draft object "Service Territory Assignment 105" (probe_service_territory_assignment_105) read "Servi…" at 65.94 px in a 560 px row.Two tokens in
studio-tokens.tschange:STUDIO_ITEM_TITLE:basis-[200px] max-w-max grow-[1000000], keepingmin-w-0 truncate.STUDIO_API_CHIP:basis-[14ch] max-w-max grow-[1000] shrink-[100000] min-w-[5ch] truncate, now a block element.StudioItemHeaderwraps the chip in the status chip's tooltip mechanism from objectui#12631: a focusable trigger, with the full name as the tooltip text. The chip's own text stays the whole name. The chip keeps its place (objectui#11665, objectui#7254), thechipsslot is untouched, and so are the tab row, the meta and status folds and their thresholds, every other token and every existing test id.Give-way order
The title and the chip share the row in steps:
When the row narrows, the meta folds and the status text folds at their existing thresholds. On a row too narrow even for those minimums, the chip shrinks first, down to 5ch, and only then does the title go below 200 px. The row never overflows. The weights are large so the other item's share stays far below a pixel.
The 14-character step reconciles two pins. One is "chip before title". The other is the card's CONTROL that a short api name stays whole at 560 px: with the card's long title, a strict order cut
accountto one letter.Measured widths (title / api chip)
Live: HotCRM under
objectstack dev --fresh, console from this branch.Geometry spec (Chromium, fixture fonts):
Deviations
Screenshots (light; evidence branch, not merged)
Test evidence (at 0250fa5)
e2e/studio-item-header-title-width.spec.ts, Chromium: 7 passed. It bundles the realStudioItemHeaderfrom source and compiles the real theme with Tailwind. Cases: the 560 px floor with the chip cut and its tooltip, short-name and short-title CONTROLs, 736 px and 1024 px CONTROLs, kind chips staying whole, and no overflow at 360 px.StudioItemHeader.apiChip-12791.test.tsx: 5 passed (whole name, hover and focus tooltip, DOM order title then api chip then chips).StudioItemHeader*files: 18 of 18 passed.git diff HEADempty afterwards:@object-ui/app-shelltype-check, eslint on the touched files and build, pluspnpm type-check:e2e,pnpm check:i18n-keys,pnpm check:i18n-drift,node scripts/check-changeset-presence.mjsandpnpm check:new-line-citations.Session:
https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952🤖 Generated with Claude Code
https://claude.ai/code/session_01Hi3YhZSf1g3MAVLbmNm952
Generated by Claude Code