Skip to content

fix(console): pin the Approvals Inbox Approve / Reject column and truncate long record titles (objectui#12816) - #12850

Merged
objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12816-approvals-inbox-actions
Oct 17, 2026
Merged

objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12816-approvals-inbox-actions

Conversation

@objectstack-fleet

Copy link
Copy Markdown
Contributor

Fixes #12816
Clause-②: no

Implemented by session https://claude.ai/code/session_011vfKFYJe5mXFiDw6F7CHuD on head 9f7f390.

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 styled w-[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. Setting max-width: 0 on the Record cells alone, in the live page, brought the table to 718 px.

What changed (ApprovalsInboxPage.tsx only)

  • Record cells are max-w-0. The title no longer sizes its column, so it truncates; its full text stays in title, and the link is still the whole title. The Record header keeps a min-w-40 floor so rows stay distinguishable at 1024 px (without it the column falls to 114 px and every row reads "ACC-00…").
  • The Approve / Reject column is pinned to the right edge in the header and in every row: sticky right-0 z-10, with the shared PINNED_RIGHT_SEAM_SHADOW_CLASSES, inside the overflow box's seam="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.
  • The pinned cell's fill is the card's (bg-card), so a table that does not scroll looks as before. An ::after layer 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.
  • Tailwind utilities and theme tokens only; no inline style. packages/components is 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 every data-testid are unchanged.

Before / after (Chromium, three pending account approvals with long titles)

table scrollWidth / clientWidth Record column Approve / Reject inside the card at rest Approve / Reject cell
main 5d69b0e, 1024 1074 / 718 473 px no (all 3 rows) static
this branch, 1024, light 762 / 718 160 px, titles truncated yes (all 3 rows) sticky, seam shadow on
this branch, 1024, dark 762 / 718 160 px, titles truncated yes sticky, seam shadow on
main 5d69b0e, 1280 1074 / 974 473 px no static
this branch, 1280, light 974 / 974 (no overflow) 282 px, titles truncated yes sticky, seam shadow off

The 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's data-overflow-right mark, and that the edge overlay stays off. The ruled seam="pinned" moves the shadow to the pinned cells.
  • The Record header floor (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 run over all 18 ApprovalsInboxPage.*.test.tsx files: exit 0, 92 tests passed.
  • New pin ApprovalsInboxPage.pinnedActions-12816.test.tsx (stubbed 718 px box, 60-character record title): pinned header and row cells with the seam classes; the Record cell max-w-0 with the full title in title; a short-title CONTROL; the focused row's ring on the pinned cell.
  • Ablations, one per new pin, each restored to the HEAD blob: Record max-w-0 removed, 1 of 6 red. sticky right-0 removed, 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-check and build for @object-ui/console (after the dependency build): exit 0. eslint on 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

…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>
@github-actions

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

Metric Value Budget
Eager closure (gzip, 75 chunks) 3135.6 KB 3744.1 KB
Main entry chunk (gzip) 75.8 KB 350 KB
Entry file index-B93fFgQF.js —
Status PASS —

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

Package Size Gzipped
app-shell (consoleActionDispatch.js) 0.20KB 0.19KB
app-shell (index.js) 21.42KB 7.85KB
app-shell (runtime-config.js) 23.60KB 8.19KB
app-shell (types.js) 0.01KB 0.04KB
app-shell (urlParams.js) 10.11KB 3.87KB
auth (ActiveOrganizationStorage.js) 27.95KB 10.04KB
auth (AuthContext.js) 0.31KB 0.24KB
auth (AuthGuard.js) 2.07KB 1.00KB
auth (AuthProvider.js) 42.48KB 11.25KB
auth (AuthShell.js) 3.49KB 1.40KB
auth (ForgotPasswordForm.js) 12.21KB 3.45KB
auth (LoginForm.js) 20.67KB 6.12KB
auth (PreviewBanner.js) 0.90KB 0.50KB
auth (RegisterForm.js) 6.72KB 2.24KB
auth (SocialSignInButtons.js) 9.74KB 3.94KB
auth (UserMenu.js) 3.39KB 1.21KB
auth (auth-gate-events.js) 1.62KB 0.83KB
auth (authStyles.js) 5.27KB 1.86KB
auth (createAuthClient.js) 42.84KB 11.66KB
auth (createAuthenticatedFetch.js) 8.54KB 3.46KB
auth (index.js) 3.63KB 1.64KB
auth (invitation-status.js) 1.22KB 0.70KB
auth (org-roles.js) 6.66KB 2.78KB
auth (phone-identifier.js) 1.11KB 0.66KB
auth (types.js) 0.59KB 0.35KB
auth (useAuth.js) 5.30KB 1.02KB
auth (useWorkspaceAdminStatus.js) 11.08KB 4.58KB
collaboration (CommentThread.js) 27.26KB 8.03KB
collaboration (LiveCursors.js) 3.17KB 1.27KB
collaboration (PresenceAvatars.js) 6.28KB 2.60KB
collaboration (PresenceProvider.js) 2.79KB 1.13KB
collaboration (commentAuthorship.js) 1.39KB 0.78KB
collaboration (index.js) 1.93KB 0.85KB
collaboration (useCollaborationTranslation.js) 6.50KB 2.52KB
collaboration (useCommentSearch.js) 1.98KB 0.88KB
collaboration (useConflictResolution.js) 7.75KB 1.86KB
collaboration (useMentionNotifications.js) 1.81KB 0.68KB
collaboration (usePresence.js) 6.33KB 1.84KB
collaboration (useRealtimeSubscription.js) 7.91KB 2.01KB
components (index.js) 606.28KB 146.84KB
core (index.js) 10.18KB 4.04KB
create-plugin (index.js) 27.94KB 9.51KB
data-objectstack (index.js) 248.83KB 69.44KB
fields (index.js) 291.36KB 74.46KB
i18n (LocalizationContext.js) 2.92KB 1.42KB
i18n (builtinAggregateLabels.js) 0.86KB 0.49KB
i18n (currency.js) 2.59KB 1.22KB
i18n (fallbackInterpolation.js) 6.25KB 2.77KB
i18n (i18n.js) 8.87KB 3.64KB
i18n (index.js) 5.52KB 2.39KB
i18n (pickLocalized.js) 9.86KB 3.95KB
i18n (provider.js) 39.35KB 12.88KB
i18n (translateFn.js) 0.20KB 0.18KB
i18n (useDisplayLocale.js) 3.52KB 1.76KB
i18n (useObjectLabel.js) 36.87KB 9.88KB
i18n (useSafeTranslation.js) 7.14KB 2.92KB
layout (index.js) 40.79KB 11.90KB
mobile (MobileProvider.js) 0.92KB 0.49KB
mobile (ResponsiveContainer.js) 0.94KB 0.38KB
mobile (breakpoints.js) 1.51KB 0.70KB
mobile (createOfflineDataSource.js) 5.61KB 1.75KB
mobile (index.js) 1.99KB 0.87KB
mobile (offlineQueue.js) 3.91KB 1.35KB
mobile (pwa.js) 0.97KB 0.49KB
mobile (serviceWorker.js) 1.48KB 0.62KB
mobile (serviceWorkerSource.js) 3.41KB 1.48KB
mobile (useBreakpoint.js) 1.54KB 0.65KB
mobile (useGesture.js) 6.96KB 1.98KB
mobile (useOfflineSync.js) 1.99KB 0.72KB
mobile (usePullToRefresh.js) 6.62KB 2.45KB
mobile (useResponsive.js) 0.72KB 0.42KB
mobile (useSpecGesture.js) 5.52KB 2.10KB
mobile (useTouchTarget.js) 1.01KB 0.54KB
permissions (MePermissionsProvider.js) 15.35KB 5.51KB
permissions (PermissionContext.js) 0.31KB 0.25KB
permissions (PermissionGuard.js) 0.89KB 0.45KB
permissions (PermissionProvider.js) 6.82KB 2.38KB
permissions (discardProofCache.js) 1.04KB 0.55KB
permissions (evaluator.js) 8.33KB 3.07KB
permissions (index.js) 0.93KB 0.41KB
permissions (store.js) 0.91KB 0.42KB
permissions (useFieldPermissions.js) 1.28KB 0.53KB
permissions (usePermissions.js) 4.83KB 2.27KB
plugin-ai (index.js) 16.04KB 3.92KB
plugin-calendar (index.js) 54.94KB 16.05KB
plugin-charts (index.js) 84.97KB 23.36KB
plugin-chatbot (index.js) 210.60KB 49.94KB
plugin-dashboard (index.js) 146.23KB 39.59KB
plugin-designer (index.js) 233.95KB 50.08KB
plugin-detail (index.js) 263.70KB 69.73KB
plugin-editor (index.js) 2.23KB 1.05KB
plugin-form (index.js) 180.22KB 46.59KB
plugin-gantt (index.js) 178.36KB 45.08KB
plugin-grid (index.js) 271.78KB 75.39KB
plugin-kanban (index.js) 62.17KB 19.22KB
plugin-list (index.js) 138.78KB 35.68KB
plugin-map (index.js) 27.07KB 8.96KB
plugin-markdown (index.js) 13.88KB 4.80KB
plugin-report (index.js) 46.66KB 13.13KB
plugin-timeline (index.js) 39.21KB 11.85KB
plugin-tree (index.js) 15.07KB 5.33KB
plugin-view (index.js) 94.68KB 24.36KB
providers (DataSourceProvider.js) 0.75KB 0.39KB
providers (MetadataProvider.js) 1.37KB 0.59KB
providers (ThemeProvider.js) 1.90KB 0.85KB
providers (UploadProvider.js) 12.07KB 3.68KB
providers (index.js) 0.45KB 0.23KB
providers (types.js) 0.01KB 0.04KB
react-runtime (index.js) 5.62KB 2.34KB
react (LazyPluginLoader.js) 4.47KB 1.63KB
react (SchemaRenderer.js) 120.23KB 39.46KB
react (data-invalidation.js) 5.05KB 2.08KB
react (index.js) 4.50KB 2.06KB
react (schema-input.js) 4.31KB 2.07KB
react (spec-input.js) 0.20KB 0.18KB
sdui-parser (body-dialect.js) 4.50KB 1.99KB
sdui-parser (codegen.js) 9.45KB 3.76KB
sdui-parser (dashboard-widget-options.js) 3.07KB 1.30KB
sdui-parser (index.js) 7.30KB 3.12KB
sdui-parser (input-type.js) 2.84KB 1.40KB
sdui-parser (parse.js) 25.28KB 7.81KB
sdui-parser (provenance.js) 3.84KB 1.90KB
sdui-parser (types.js) 0.29KB 0.24KB
sdui-parser (validate.js) 23.87KB 7.83KB
types (ai.js) 4.39KB 2.17KB
types (api-types.js) 0.20KB 0.18KB
types (app.js) 4.12KB 1.61KB
types (authoring-nodes.js) 0.20KB 0.19KB
types (base.js) 0.20KB 0.18KB
types (blocks.js) 0.20KB 0.18KB
types (cloud.js) 0.20KB 0.18KB
types (complex.js) 4.44KB 2.07KB
types (crud.js) 0.20KB 0.18KB
types (dashboard-filter-alias.js) 6.23KB 2.74KB
types (dashboard-widget-layout.js) 2.06KB 0.96KB
types (data-display.js) 3.75KB 1.85KB
types (data-protocol.js) 0.20KB 0.19KB
types (data.js) 0.20KB 0.18KB
types (designer.js) 1.85KB 0.85KB
types (disclosure.js) 0.20KB 0.18KB
types (error-code.js) 1.54KB 0.88KB
types (expression.js) 0.20KB 0.18KB
types (feedback.js) 0.20KB 0.18KB
types (field-types.js) 1.13KB 0.65KB
types (form.js) 0.20KB 0.18KB
types (http-inflight.js) 8.87KB 3.73KB
types (http-retry.js) 4.32KB 2.02KB
types (icon-key-migration.js) 4.26KB 1.63KB
types (index.js) 5.78KB 2.70KB
types (layout.js) 0.20KB 0.18KB
types (managed-by.js) 0.19KB 0.18KB
types (mobile.js) 5.00KB 2.39KB
types (navigation.js) 0.20KB 0.18KB
types (node-slots.js) 7.18KB 2.34KB
types (objectql.js) 0.20KB 0.18KB
types (overlay.js) 0.20KB 0.18KB
types (permissions.js) 2.52KB 1.31KB
types (plugin-scope.js) 0.20KB 0.18KB
types (record-approval-decision.js) 0.20KB 0.20KB
types (record-components.js) 0.20KB 0.19KB
types (record-panels.js) 0.20KB 0.19KB
types (record-semantics.js) 1.28KB 0.67KB
types (registry.js) 0.20KB 0.18KB
types (reports.js) 0.20KB 0.18KB
types (select-option.js) 0.20KB 0.19KB
types (spec-report.js) 4.99KB 1.96KB
types (spec-ui-namespace.js) 0.20KB 0.19KB
types (strict-authoring-face.js) 19.93KB 7.26KB
types (system-fields.js) 3.33KB 1.54KB
types (theme.js) 6.28KB 2.87KB
types (ui-action.js) 8.48KB 3.50KB
types (views.js) 0.20KB 0.18KB
types (widget.js) 0.20KB 0.18KB

Size Limits

  • ✅ Core packages should be < 50KB gzipped
  • ✅ Component packages should be < 100KB gzipped
  • ⚠️ Plugin packages should be < 150KB gzipped

@objectstack-fleet

Copy link
Copy Markdown
Contributor Author

席位核对 — ACCEPT · objectui#12816 · head 9f7f390 · 2026-10-17T03:18Z

Seat domain:ui#4, session session_01SJn1GEkrbbBQkhGC26wEDw. Checked against GitHub and the diff, not against the report (relayed on the card). The seat opened this PR from the dev's drafts (degraded channel). The body is the dev's draft verbatim; the title adds the card number.

Checklist

  • Form:

    • Draft → main, assignee os-sales.
    • The first line is Fixes #12816, and the second is Clause-②: no, as the claim declares (6228542313).
    • Two commits, each carrying only the model-free trailer pair.
    • git merge-tree against current main is clean. 4 files, +279 / −12, all in the claimed surface. No PNG, and nothing under packages/components.
  • Rulings, as bound:

    • The Approve / Reject column is pinned right in the header and in every row: sticky right-0 z-10 with the shared PINNED_RIGHT_SEAM_SHADOW_CLASSES, in the overflow box's seam="pinned" mode, the way the console's lists pin their Actions column. The pinned cell repaints the row's hover and focus tints and the focused row's ring.
    • The Record column truncates a long title: the cells are max-w-0, so the title no longer sets the column's width. The full text stays in title, and the link is still the whole title.
    • Nothing else changes: the other columns' widths, the filters, the inline flows, the dialogs, the waiting-on-others section and every data-testid.
  • Mechanism assumptions: all four held. Assumption 3 was the cause: a nowrap title set the auto-layout column's minimum width (473 px). One premise was falsified, a good result: on main the 1280 px table also overflowed with these titles (1074 in 974), and this PR fixes that too.

  • Live readings (HotCRM, three pending account approvals with long titles):

    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):

    • main at 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 ruled seam="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-check and build for @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

  1. 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.
  2. 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.
  3. The rewritten objectui#12708 case: accepted. It follows the ruled seam mode, and the file is in the claimed surface.
  4. 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

@objectstack-fleet

Copy link
Copy Markdown
Contributor Author

Landing · head 9f7f390 · 2026-10-17T03:30Z

  • Head since the ACCEPT: unchanged, 9f7f390. The ACCEPT 6228957445 was written at this head. No contract review is owed (Clause-②: no).
  • Checks on 9f7f390: 36 runs, 33 green and 3 expected skips, none red. That includes Repo Gates, Build & E2E, all test shards, Type Check, Lint, Changeset Bump Policy and Bundle Analysis at 3,135.6 KB against the 3,744.1 KB ceiling.
  • Merge state: clean against main b921f90.
  • Commit messages: both commits carry only the model-free trailer pair, so the squash adds no model name to main.
  • Action: mark it ready for review and enable auto-merge through the merge queue. Fixes #12816 closes the card on merge.

Generated by Claude Code

@objectstack-fleet
objectstack-fleet Bot marked this pull request as ready for review October 17, 2026 03:31
@objectstack-fleet
objectstack-fleet Bot enabled auto-merge October 17, 2026 03:31
@objectstack-fleet
objectstack-fleet Bot added this pull request to the merge queue Oct 17, 2026
Merged via the queue into main with commit 4b3d6ed Oct 17, 2026
37 checks passed
@objectstack-fleet
objectstack-fleet Bot deleted the claude/issue-12816-approvals-inbox-actions branch October 17, 2026 03:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

2 participants