Studio at 1024 px: the read-only app chip, the flow item header and the Access tabs truncate or wrap

Source

Measured on objectui main 8415d9f11 in a 1024 × 768 pane (en) and re-checked at 1280 × 900 (zh), HotCRM open:

Data pillar: the shell header's app chip reads "Hot… 🔒 Read-only ▾" — the lock and the Read-only label (objectui#12453) take the chip's width and the name truncates to three letters. At 1280 the name is whole.
Automations pillar: the item header reads "Enroll Memb…" and the meta "Trigger: screen · Status: (" is cut mid-word; the "Read-only · Customize with an overlay" chip at the right truncates to "Read-onl…". At 1280 the title, meta and chip are whole.
Access pillar: the five tab labels wrap to two lines ("System capabilities", "Row-level security", "Tab visibility", "Delegated admin"), the tab row is 60 px instead of 36; at 1280 in zh the labels are short and the row is 36 px.
Interfaces pillar: with the aside folded into a "Canvas / Properties" toggle (objectui#11795), the dashboard's KPI cards read "Total … Total Amount" and "Active A… Accounts"; nothing says the properties aside moved into the toggle.

Target

The app chip truncates in this order: the Read-only label first (lock stays), then the name with a 120 px minimum; the full name and the posture are in the chip's tooltip.
The item header hides the meta slot first (below 1100 px content width), then the status chip's text (icon stays, text in tooltip), and truncates the title last; the title keeps at least 200 px.
The tab row never wraps: white-space: nowrap, horizontal scroll with faded edges when the tabs exceed the row; the active tab scrolls into view.
When the aside folds, the toggle's "Properties" segment carries a dot while the aside has content, and the folded canvas keeps a 16 px gutter so KPI cards get their min-width.

File surface

packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx (shell header chip, StudioItemHeader usage), StudioItemHeader.tsx (meta / chip folding), studio-tokens.ts (tab row), the Interfaces pillar's folded layout, tests beside each.

Acceptance

Tests at a 1024 px jsdom width: the chip's visible text starts with "HotCRM"; the item header's title has no ellipsis for a 26-character title; the tab row has one line.
Screenshots at 1024 and 1280 px of the four pillars, light and dark.
StudioDesignSurface.*.test.tsx and the pillar tests green.

Constraints

objectui#11795's fold width and objectui#12453's read-only signals stay; only their narrow-width rendering changes.

Evidence

Screenshots on the temporary branch claude/console-home-login-design-20261016 of objectstack-ai/objectui (commit 01244b886, never merged): studio-1024-data-app-chip-truncated.jpg · studio-1024-automations-header-truncated.jpg · studio-1024-access-tabs-wrap.jpg · studio-1024-interfaces-kpi-truncated.jpg.

_{Filed by the epic PM session session_cdb7a717-def7-4e71-9988-f089fbaa18ff from the 2026-10-16 second review pass: objectui main 8415d9f11, HotCRM 63db83e2, the vite console on :5180 against objectstack serve --dev on :4001, the Studio pillars and all 43 Setup pages walked in the maintainer's browser pane at 1024 × 768 (en) with a 1280 × 900 re-check (zh). The maintainer asked for every finding to be filed, verbatim: 「全部立卡」.}

Claim: PM loop round 2 (priority:p2; the epic PM session's 2026-10-16 second review pass, 「全部立卡」)
Session: session_01SJn1GEkrbbBQkhGC26wEDw
Account: os-sales (the seat's linked user as GET /user answers it; the card's assignee)
Branch: claude/issue-12611-studio-1024
Worktree: objectui-issue-12611 (in the cloud session's own container)
Domain: domain:ui
Seat: domain:ui#4
File surface: packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx (only the shell header's app chip and the Interfaces pillar's folded layout and its properties toggle), StudioItemHeader.tsx (meta and status folding), studio-tokens.ts (the tab row), metadata-admin/i18n.ts (new keys only, if a tooltip needs one), tests beside each, one .changeset/12611-*.md (stop on breach; explain in the report)
Container & model: M, mode:cloud, model: opus (cloud on the maintainer's stance 「可以的话，ui 后续开发尽量用云 session，并且要求截图给我看」; lane scope on 「你也可以接ui车道的卡」; batch 5 on 「上限提到 5，提速」, this session's chat, 2026-10-15)
Clause-②: no
Responsibility: n/a — narrow-width rendering of shipped Studio signals (objectui#12453, objectui#11795, objectui#12524)
Thread-read: none
Serial constraints cleared: objectui#12612 (this seat, same round) works in the rail's group list of StudioDesignSurface.tsx and in flowGrouping.ts, a separate region. Fold-or-serial: not folded (fold gate ① fails: a truncation fix and a sort order are not one defect shape); parallel by region, and the later lander merges main. The KPI tiles' own truncation (target 4's symptom) is objectui#12623's (this seat, same round, packages/plugin-dashboard); this card builds only the toggle's dot and the folded gutter. No open PR touches views/studio-design/.

os-dev-report

{
  "issue": 12611,
  "status": "done",
  "branch": "claude/issue-12611-studio-1024",
  "pr": 12631,
  "session": "session_01EE4TXJSckWuMhHs8WdqHyj",
  "premise_still_valid": true,
  "summary": "All four symptoms reproduced on 33fbc861d with HotCRM at 1024 px, and all four are fixed on dfbb125. App chip: its room now comes from the header's package column (a container query) and the viewport-keyed 180 px cap is gone. Below a 300 px column the Read-only word folds and the lock stays. A Radix tooltip carries the whole name, the posture and the switch hint. Item header: the title row is the container. The meta folds below 640 px of row; while it shows it takes only the room left over (basis-0 grow). Below 480 px the status chip's text folds behind a pencil glyph, and its label and sentence move into its tooltip and accessible description. The title truncates last. Tab row: tabs never wrap, the row scrolls sideways with edge fades driven by the scroll position, and the active tab calls scrollIntoView. Folded Interfaces: the Properties segment shows a dot while the folded aside holds an editor, and the canvas has a 16 px gutter. Browser readings at 1024: chip name 51/51 (was 39/51), flow title 245/245 (was 129/245), Access title 179/179, every tab 36 px high. PM assumptions 1-3 held. Assumption 4 was partly false: the cited 11795 comment is the Automations config drawer, and if-properties-toggle is the header icon shown only when not folded; the folded toggle is studio-center-tabs. I did not touch the card's assignee. Following the dispatch's degraded channel, I did not open the PR or comment on the card.",
  "tests": "New pins: StudioItemHeader.narrowWidth-12611 (9 tests), StudioDesignSurface.narrowChip-12611 (4), InterfacesPillar.foldedToggle-12611 (3). Updated: StudioDesignSurface.readOnlyWording-11781 (the sentence is now the chip's accessible description), and the chip locator in 12 StudioDesignSurface.* tests (getByTitle 'Switch / create package' became getByTestId studio-pkg-chip). Targeted run of the new and touched pins: 8 files, 40 tests passed. Header pins re-run after the meta-basis fix: 2 files, 13 passed. Full studio-design directory plus PermissionMatrix tests at 2bdbb59: 218/219 files passed. The one red was selectionLeafScope: the dot's sr-only text had changed the tab's text; fixed by moving that text to aria-describedby. Full `pnpm --filter @object-ui/app-shell test` on dfbb125: exit 0, Test Files 1435 passed | 1 skipped (1436), Tests 13586 passed | 9 skipped (13595). Ablation: the tests import source by relative path, so no dist is involved. Each leg checked anchor count 1, wrote the mutation and re-read it on disk, ran vitest under the lock, restored with git checkout HEAD -- PATH, and compared git hash-object with the HEAD blob. Results: row container, meta fold, status text fold, tab nowrap, tab row scroll, fade attr and active scrollIntoView each 1 failed / 8 passed (9); chip word fold 1/4, chip column container 1/4, chip tooltip name 2/4; properties dot 1/3, folded gutter 1/3; status description (11781 pin) 1/4. Final git diff HEAD = ''.",
  "gates": "Local, on dfbb125, exit captured before any pipe: pnpm --filter @object-ui/app-shell test = 0 (VERDICT command-exit 0); pnpm --filter @object-ui/app-shell type-check = 0 (script name echoed); pnpm --filter @object-ui/app-shell build = 0 (VERDICT command-exit 0); dependency closure `pnpm --filter '@object-ui/app-shell^...' build` = 0; eslint on the 21 touched ts/tsx files = 0 (0 errors; 18 warnings, none on a line this diff touches); pnpm check:i18n-keys = 0; check:i18n-drift = 0; check:i18n-designer-parity = 0 (1 new key in en and zh); check:i18n-dead-keys not run (no key retired); node scripts/check-changeset-presence.mjs = 0; pnpm check:new-line-citations = 0 (0 new); control-byte grep over touched files = no hits. `node scripts/check-nul-bytes.mjs` does not exist in objectui (MODULE_NOT_FOUND, not a gate reading). objectui has no scripts/pm/dispatch-gates.mjs, so there is no --ran reconciliation; I derived the gate families by hand from the dispatch. CI: NOT MEASURED, reason: no PR was opened from this container (degraded channel); the PM opens it.",
  "mcp_calls": "8 — mcp__github__issue_read (get 12611, get_comments 12611, get 12453, 11795, 12303, 12612, 12623, 12524); no GitHub write tool. Also 2 mcp__claude-code-remote__add_repo calls (read access, objectstack and hotcrm; nothing attached).",
  "api_writes": "0 REST writes. git push only: claude/issue-12611-studio-1024 (empty branch, 2bdbb59, dfbb125) and claude/issue-12611-evidence (ab8825f6).",
  "open_questions": [
    {
      "question": "Contract conflict: os-dev.md says to post the report as a card comment and open the draft PR; the dispatch's degraded channel says to do neither, because the fleet-write relay is refused. Which wins here?",
      "options": [
        "A: the dispatch's degraded channel (PM opens the PR from pr_body_draft and posts this report)",
        "B: os-dev.md (dev writes via MCP)"
      ],
      "recommendation": "A. The file's write path (the fleet-write relay) is exactly what the dispatch measured as refused, and an MCP write voids the report. I followed A."
    },
    {
      "question": "Commit trailers: the harness reminder asked for a Co-Authored-By line that names the model; objectui AGENTS.md requires the model-free pair. Which was used?",
      "options": [
        "A: AGENTS.md model-free pair",
        "B: harness line"
      ],
      "recommendation": "A, per the harness's own precedence sentence. The commits carry Claude-Session plus Co-authored-by: Claude."
    },
    {
      "question": "Meta threshold: the card says 1100 px content width. That would hide the meta at 1280, where the content column is 740 px with an aside open, and contradict the card's own 1280 reading. I used 640 px of the title row instead. Keep it?",
      "options": [
        "A: 640 px of the row's own box (measured)",
        "B: 1100 px as written"
      ],
      "recommendation": "A. It is the only value that matches both of the card's readings (folded at 1024, whole at 1280), and it keys off the element's own box as ruled."
    },
    {
      "question": "The title's 200 px floor and the name's 120 px floor come from the yield order, not from a min-width. Acceptable?",
      "options": [
        "A: yield order (no padding on short titles or names; floors hold at 1024 and 1280 as measured)",
        "B: a literal min-width (pads short names such as HotCRM, which is 51 px)"
      ],
      "recommendation": "A, on the long-term axis: a min-width would add empty space after every short title in every pillar."
    }
  ],
  "out_of_scope_findings": [
    "carrier: none · noted, not filed: on a narrow Automations or Access tab row, the objectui#12453 read-only link sits at the scroll end behind the fade. It is whole and reachable by scrolling and by Tab. Moving it out of the tab row would need a trailing slot on StudioItemHeader plus edits in the Automations and Access regions, which are outside this claim. Dedupe words: studio read-only link tab row scroll · item header trailing slot · automations narrow tab row"
  ],
  "deviations": [
    "The meta folds below 640 px of the title row, not below 1100 px of content width (see open_questions)",
    "The title and name floors come from the yield order, not from a min-width",
    "The container is the title row, not the header: an unnamed container query answers the nearest container, and the Data tab fold lives in the header's tab row",
    "The chip's native title moved into the Radix tooltip, and 12 tests now find the chip by the new data-testid studio-pkg-chip. The 12453 title on the read-only span is kept because it is pinned, so hovering the lock alone also shows the browser's native hint",
    "The status chip's sentence moved from a native title to the tooltip plus aria-describedby (a hidden sibling); the 11781 pin is updated to match, and the chip is now focusable",
    "The folded toggle is studio-center-tabs, not if-properties-toggle (PM assumption 4 was partly false)",
    "No merge of origin/main: the only new commit is objectui#12623 (plugin-dashboard), with no overlap and no conflict",
    "The status chip's folded text was not measured in the browser (HotCRM is read-only, so no draft chip renders); only the jsdom pins cover it"
  ],
  "files_changed": [
    ".changeset/12611-studio-narrow-width.md",
    "packages/app-shell/src/views/metadata-admin/i18n.ts (1 new key, en and zh)",
    "packages/app-shell/src/views/studio-design/StudioDesignSurface.tsx (app chip; Interfaces folded toggle, gutter, inspectorHasContent)",
    "packages/app-shell/src/views/studio-design/StudioItemHeader.tsx",
    "packages/app-shell/src/views/studio-design/studio-tokens.ts",
    "packages/app-shell/src/views/studio-design/StudioItemHeader.narrowWidth-12611.test.tsx (new)",
    "packages/app-shell/src/views/studio-design/StudioDesignSurface.narrowChip-12611.test.tsx (new)",
    "packages/app-shell/src/views/studio-design/InterfacesPillar.foldedToggle-12611.test.tsx (new)",
    "packages/app-shell/src/views/studio-design/StudioDesignSurface.readOnlyWording-11781.test.tsx",
    "12 StudioDesignSurface.*.test.tsx chip-locator updates: autosaveSwitch-11232, desktopHint-11795, entryReadsOnce-11797, manageSnapshotRefresh, narrowHeader-12509, packageDeletionInference, packageLessFlows-11553, packageListErrorPosture, packageLookupFailure, packageUserMessage, pillarNavGuard, readOnlyPosture-12453"
  ],
  "screenshots": [
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-data-1024-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-data-1024-dark.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-data-1280-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-data-chip-700-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-automations-1024-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-automations-1024-dark.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-automations-1280-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-access-1024-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-access-1024-dark.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-access-1280-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-interfaces-1024-light.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-interfaces-1024-dark.png?raw=true",
    "https://github.com/objectstack-ai/objectui/blob/ab8825f63fbcf1c312c2b0659460b1d7b6ea23eb/docs/design/findings/12611/after-interfaces-1280-light.png?raw=true"
  ],
  "line_budget": "n/a",
  "pr_title_draft": "fix(app-shell): Studio at 1024 px keeps the package name, the flow title and the tab labels readable (objectui#12611)",
  "pr_body_draft": "(elided: it is the body of objectstack-ai/objectui#12631, opened from it verbatim by the seat)"
}

Relayed by seat domain:ui#4 (session_01SJn1GEkrbbBQkhGC26wEDw) from the cloud session's final message (degraded channel: the session pushed and returned pr: null; the seat opened #12631 from pr_title_draft and pr_body_draft, and set pr above).

Generated by Claude Code

Landed · PR #12631 merged as a8560b2 on main · read 2026-10-16T07:49Z

probe on `origin/main` `a8560b2`	reading	control
`STUDIO_HEADER_PACKAGE_COLUMN = '@container'` and `STUDIO_PKG_READONLY_WORD = 'hidden @min-[300px]:inline'` in `studio-tokens.ts`	present	the chip's room is the header column's, and the word folds before the name
`STUDIO_ITEM_ROW` (`… @container`) used by `StudioItemHeader.tsx`	present	the title row is the container, keyed off its own box
`STUDIO_TAB` carries `shrink-0 … whitespace-nowrap`, and the tab `nav` carries `data-fade`	present	tab labels never wrap; the row scrolls sideways
`scrollIntoView?.({ block: 'nearest', inline: 'nearest' })` on the active tab	1	the open tab stays in view
`inspectorHasContent` drives the Properties dot; the folded canvas is `px-4`	present	target 4, toggle and gutter only; the KPI tile is objectui#12623's
`narrowChip-12611`, `narrowWidth-12611`, `foldedToggle-12611` tests, and `.changeset/12611-studio-narrow-width.md`	present	—

State change: the card closed as completed through Fixes #12611, and pm:dispatched is removed in this act. The cloud session session_01EE4TXJSckWuMhHs8WdqHyj is archived. The merge-group dequeue was the objectui#12612 pin's latent order dependence, fixed test-only in 973b7e1 (follow-up ACCEPT above). objectui#11795's fold width and objectui#12453's read-only signals are unchanged.

Generated by Claude Code

fix(app-shell): Studio at 1024 px keeps the package name, the flow ti…

Navigation Menu

Repository navigation

Studio at 1024 px: the read-only app chip, the flow item header and the Access tabs truncate or wrap #12611

Source

Target

File surface

Acceptance

Constraints

Evidence

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Studio at 1024 px: the read-only app chip, the flow item header and the Access tabs truncate or wrap #12611

Description

Source

Target

File surface

Acceptance

Constraints

Evidence

Activity

objectstack-fleet commented on Oct 16, 2026

objectstack-fleet commented on Oct 16, 2026

objectstack-fleet commented on Oct 16, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions