Repository navigation
fix(console): pin the Approvals Inbox Approve / Reject column and truncate long record titles (objectui#12816) - #12850
Conversation
…ncate long record titles At 1024 px the inbox table was 1074 px wide in a 718 px box: the record titles are nowrap and an auto-layout table sizes a column by its content's minimum width, so the Record column took 473 px and the inline Approve / Reject column sat past the card's right edge. - The Record cells are max-w-0, so a long title truncates (full text in its title) instead of widening the table; the Record header keeps a 10rem floor so rows stay distinguishable. - The Approve / Reject column is sticky at the right edge in the header and every row, inside the overflow box's seam="pinned" mode, carrying the shared PINNED_RIGHT_SEAM_SHADOW_CLASSES. Its fill is the card's; the row's hover and focus tints and the focused row's ring are redrawn on it. Claude-Session: https://claude.ai/code/session_011vfKFYJe5mXFiDw6F7CHuD Co-authored-by: Claude <noreply@anthropic.com>
…rd truncation ApprovalsInboxPage.pinnedActions-12816 pins, at a stubbed 718 px box with a 60-character record title: the Approve / Reject header and every row's cell pinned right with the shared seam shadow, the Record cell max-w-0 with the full title in title, a short-title CONTROL, and the focused row's ring on the pinned cell. The objectui#12708 pin now reads the box's overflow mark, since the shadow moved from the box's edge to the pinned cells' seam. Claude-Session: https://claude.ai/code/session_011vfKFYJe5mXFiDw6F7CHuD Co-authored-by: Claude <noreply@anthropic.com>
✅ 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
|
席位核对 — ACCEPT · objectui#12816 · head
|
| width | before (scrollWidth / clientWidth, Record) |
after | Approve / Reject at rest |
|---|---|---|---|
| 1024 | 1074 / 718, 473 px | 762 / 718, 160 px | inside the card, pinned, seam shadow on (before: outside) |
| 1280 | 1074 / 974, 473 px | 974 / 974, 282 px | inside the card, no overflow |
Screenshots, read by the seat (never-merged claude/issue-12816-evidence at e760383):
mainat 1024 px (before): the action column past the card's edge;- 1024 px light and dark: the Record titles truncate ("ACC-000011 - …"), and the Approve / Reject column is pinned at the right edge with the seam shadow; the hovered row shows its two buttons;
- 1280 px light (CONTROL): nothing overflows;
- 1024 px with a keyboard-focused row: the ring runs on across the pinned cell.
Sent to the maintainer at 2026-10-17T03:18Z.
Tests:
- New
ApprovalsInboxPage.pinnedActions-12816.test.tsx, 4 tests at a stubbed 718 px box with a 60-character title: the pinned header and row cells with the seam classes; the Record cell truncating with its full title; a short-title CONTROL; the focus ring on the pinned cell. - The objectui#12708 pin's edge-shadow case now checks
data-overflow-right, because the ruledseam="pinned"moves the shadow to the pinned cells. - Six ablations, each red, each restored to the HEAD blob.
- All 18
ApprovalsInboxPage.*test files: 92 tests passed. type-checkandbuildfor@object-ui/console, eslint on touched files (0 errors), the i18n checks, line citations, changeset presence and no-major: all exit 0.
Changeset: @object-ui/console patch; user-facing prose.
CI: running at this record. Landing waits for green.
Rulings
- The Record column's floor (
min-w-40): A, as built. Without it every row reads "ACC-00…" at 1024 px and an approver cannot tell the records apart, as measured live. The table's width still never depends on the title; the pinned column absorbs the 44 px that remain. - The hover-revealed buttons: A, unchanged. The ruling kept the inline flows as they are. The buttons now sit inside the card, pinned, and paint on row hover or focus, as before. Always-visible buttons would change every row at every width; if wanted, that is its own card.
- The rewritten objectui#12708 case: accepted. It follows the ruled seam mode, and the file is in the claimed surface.
- The contract conflict: as dispatched. The relay is refused from the dev's container, so the seat opened the PR and relayed the report.
Implemented-by: cloud session session_011vfKFYJe5mXFiDw6F7CHuD, branch claude/issue-12816-approvals-inbox-actions
Generated by Claude Code
Landing · head
|
Fixes #12816
Clause-②: no
Implemented by session
https://claude.ai/code/session_011vfKFYJe5mXFiDw6F7CHuDon head9f7f390.What was wrong (measured, HotCRM under
objectstack dev --fresh, Chromium)The record titles are
nowrap, and the inbox table uses auto layout, which sizes a column by its content's minimum width. A long title ("ACC-000011 - Contoso Pharmaceuticals and Life Sciences Group") therefore held the Record column at 473 px although it is styledw-[30%]. The table was 1074 px wide in a 718 px box, and the inline Approve / Reject column sat past the card's right edge. Settingmax-width: 0on the Record cells alone, in the live page, brought the table to 718 px.What changed (
ApprovalsInboxPage.tsxonly)max-w-0. The title no longer sizes its column, so it truncates; its full text stays intitle, and the link is still the whole title. The Record header keeps amin-w-40floor so rows stay distinguishable at 1024 px (without it the column falls to 114 px and every row reads "ACC-00…").sticky right-0 z-10, with the sharedPINNED_RIGHT_SEAM_SHADOW_CLASSES, inside the overflow box'sseam="pinned"mode. This is how the console's lists pin their Actions column: the shadow sits on the pinned cells' left edge while the table scrolls under them. The box's own edge overlay is no longer drawn.bg-card), so a table that does not scroll looks as before. An::afterlayer behind the cell's content redraws the row's hover and keyboard-focus tints on that fill, and the focused row's ring is redrawn on the pinned cell.packages/componentsis untouched, and the shared overflow box is used as published. The other columns' widths, the filters, the inline approve and reject flows, the dialogs, the waiting-on-others section and everydata-testidare unchanged.Before / after (Chromium, three pending account approvals with long titles)
5d69b0e, 10245d69b0e, 1280The buttons are still revealed on row hover or focus, as before. The table only shows where they sit.
Screenshots (evidence branch
claude/issue-12816-evidence, never merged)Deviations
ApprovalsInboxPage.tableOverflow-12708.test.tsx: the case that checked the box's edge shadow now checks the box'sdata-overflow-rightmark, and that the edge overlay stays off. The ruledseam="pinned"moves the shadow to the pinned cells.min-w-40) is this PR's choice; the reasoning is in the dev report on the card.Test evidence (head
9f7f390)pnpm exec vitest runover all 18ApprovalsInboxPage.*.test.tsxfiles: exit 0, 92 tests passed.ApprovalsInboxPage.pinnedActions-12816.test.tsx(stubbed 718 px box, 60-character record title): pinned header and row cells with the seam classes; the Record cellmax-w-0with the full title intitle; a short-title CONTROL; the focused row's ring on the pinned cell.max-w-0removed, 1 of 6 red.sticky right-0removed, 1 of 6 red.seam="pinned"changed to edge, 2 of 6 red. Record floor removed, 1 of 6 red. Focus ring removed, 1 of 6 red. Seam classes removed, 1 of 6 red.type-checkandbuildfor@object-ui/console(after the dependency build): exit 0.eslinton the touched files: 0 errors.check:i18n-keys,check:i18n-drift,check:new-line-citations,check-changeset-presence,check-changeset-no-major: all exit 0.Acceptance notes
Generated by Claude Code