Skip to content

fix(plugin-grid): a rich-content cell keeps the grid's one-line row — the Studio Records grid and console lists draw every row (objectui#12480) - #12502

Merged
objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12480-studio-grid-missing-rows
Oct 15, 2026
Merged

objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12480-studio-grid-missing-rows

Conversation

@objectstack-fleet

Copy link
Copy Markdown
Contributor

Fixes #12480
Clause-②: no

Root cause

The rows are not missing: they are drawn, below the fold of the grid's scroll box. One row is very tall.

  • data-table keeps a cell to one line with truncate unless the column is authored wrap: true. truncate is nowrap + overflow hidden + ellipsis. It bounds inline content only. It never bounds the cell body's height.
  • The three rich-content cell renderers (markdown, html, richtext, the RICH_TEXT_FIELD_TYPES table in @object-ui/fields) draw a block document: paragraphs, headings, lists. Blocks stack under nowrap.
  • HotCRM's crm_account has a description markdown field. Its seed gives Acme Corporation a long multi-paragraph description. The Studio Records grid shows every non-system field as a column (37 here), so the Description column is in the grid, off-screen to the right.
  • Result: Acme's row grows to the document's height (456 px in Chromium). Its visible cells are vertically centred in that row, which reads as "a tall empty band, then the row". The rows after it sit below the scroll box's bottom edge, and the footer still counts them.
  • The committed screenshot fits this exactly: row 9 starts at y 586, and a 456 px row centred there puts its text at y 814. The screenshot shows it at y 815.

The trigger is the content, not the row count. The 8-row object in the card did not reproduce it because it has no long rich-content value. An 8-row object with one does the same thing (table below).

PR #12479 is not the cause: the screenshot's commit cf430cd is an ancestor of #12479's merge commit (git merge-base --is-ancestor exit 0).

The fix

ObjectGrid (packages/plugin-grid/src/ObjectGrid.tsx). Every column passes through applyColumnChrome. That function now also runs a new step, withOneLineRichText. For a column whose field resolves to a rich-content renderer and which is not authored wrap: true, it wraps the renderer's output in a line-clamp-1 box. The first line of the document shows; the rest is cut.

  • The renderer itself is unchanged, so its sanitising pipeline stays the trust boundary.
  • A column authored wrap: true still shows the whole document, as authored.
  • The record-detail drawer resolves its renderers separately, so it still shows the full document.

Why not in data-table: it does not know field types. A generic height clamp there would also clip legitimate one-line widgets that are taller than one text line. Measured on the same harness: thumbnails 32 px, select badges 22 px, against a line height of 16 to 19.5 px.

Measured per type on the harness: only markdown, html and richtext exceed one line. Before the fix, at the first row: html 176 px and richtext 104 px. textarea, json, address, multi-select, file, image and code stay within 16–32 px. So the clamp covers the whole class.

Browser readings (Chromium /opt/pw-browsers/chromium, 1280 x 900)

Scratch harness in apps/console (never committed, deleted after). It uses the real ObjectView (plugin-view) with renderStudioGridList as its renderListView slot, inside a min-h-0 flex-1 overflow-auto body like the Data pillar's data-records-body. A mock data source supplies crm_account-shaped fields, plus a description markdown field carrying the Acme description on the last row. The "console" rows mount ListView (plugin-list) directly with its default toolbar, which is the body the console's object list page renders. No backend ran.

case rows before: tall row / rows inside the box after
Studio, plain text only (control) 8 / 9 / 10 none, all 41 px, 8/8, 9/9, 10/10 visible not re-measured in the browser; the jsdom CONTROL pin holds it
Studio, one long markdown description 8 last row 456 px, 7 of 8 visible all 41 px, 8 of 8
Studio, one long markdown description 9 last row 456 px, 8 of 9 visible all 41 px, 9 of 9
Studio, one long markdown description 10 last row 456 px, 9 of 10 visible, table 873 px in a 642 px box all 41 px, 10 of 10, table 458 px
console list body, same data 8 / 9 / 10 last row 456 px; 7/8, 8/9, 9/10 visible all 36 px, 8/8, 9/9, 10/10

Triage's second question: yes, console list pages show the same thing. They render through the same ObjectGrid, and this fix covers both.

Tests (head 256cd24d4)

  • New: packages/plugin-grid/src/__tests__/ObjectGrid.richTextOneLine-12480.test.tsx (jsdom does no layout, so these read the class contract and the row count).
    • 10 rows with a markdown, an html and a richtext column: 10 body rows; 30 clamps (line-clamp-1), one per rich cell; each document is drawn inside its clamp; the text column is not clamped.
    • wrap: true on the markdown column: no clamp, and the list is drawn.
    • CONTROL: an 8-row object with no rich-content column: 8 rows, no clamp, the cell still truncates.
  • Ablation (fix committed in d4005d878, mutated with objectstack's scripts/ablation-replace.mjs --hold under an EXIT trap):
    • The guard line in withOneLineRichText was replaced by an unconditional return col. On disk: anchor count 1 to 0, marker count 0 to 1.
    • Result: the pin went red (1 failed / 2 passed), and the browser's console rows above went back to the 456 px row.
    • Restored with git checkout HEAD. git diff HEAD is 0 bytes, and the file's blob equals the HEAD blob (887bcfcb3989).
    • No dist step: the test imports ../ObjectGrid by source path.
  • vitest run packages/plugin-grid/: 216 files / 2015 tests passed (on d4005d878). The new pin plus ObjectGrid.columnWrapForward.test.tsx: 8 / 8 passed on 256cd24d4.
  • pnpm --filter @object-ui/plugin-grid type-check (both tsc projects; the test project includes src/**/*.test.tsx): exit 0, after pnpm --filter '@object-ui/plugin-grid^...' build exit 0.
  • No public export, prop or schema key changed, so the import-side packages owe no tests (declared, CI runs them).

Gates

  • check:phantom-deps, self-import, unreferenced-sources, doc-example-readers, handler-key-reads, side-effects-array, element-data-source-declaration, spec-symbols, action-forward-parity, designer-field-key-parity, icon-record-names, i18n-keys, i18n-drift, i18n-designer-parity, control-bytes and new-line-citations: all exit 0.
  • node scripts/check-changeset-fixed.mjs, check-changeset-presence.mjs and check-changeset-no-major.mjs: exit 0.
  • check:spec-floors: exit 1, its "no-artifact" prerequisite line (it wants a whole-workspace build). NOT MEASURED here. It is the known red on main (objectui#12334).
  • Lint, narrowed to the 2 changed files (eslint --no-inline-config --format json). The test file has 0 errors. ObjectGrid.tsx has 1 error and 219 warnings; linted the same way, the base blob has 1 error and 215 warnings. The one error is the same pre-existing react-hooks/static-components far below the edit. The 4 new warnings are no-explicit-any on the new step's col / value / row / schema reads, the same spelling as its neighbour withSortability. The repo-wide pnpm lint is CI's.

Acceptance notes

  • Content, not count. The card's "8-row case is fine" is true only for an object with no long rich-content value. The pin's CONTROL keeps that case unchanged.
  • wrap: true keeps the full document. A rich-content column authored wrap: true still grows its row to the whole document. That is the author's choice, and this change keeps it.
  • Not measured.
    • The phone card layout (below 768 px). ObjectGrid resolves its own renderers there, so this change does not reach it.
    • Kanban and gallery cards, which draw the same renderers.
    • A dotted lookup-path column (no field definition here, so not clamped).
  • Merge. origin/main was merged once more right before opening (256cd24d4, a merge commit). PR feat(app-shell): Automations pillar — rail grouped by object, flow meta and switch in the item header, Canvas · Variables · Runs · Problems · Debug tabs (objectui#12454) #12481's region of StudioDesignSurface.tsx is untouched: this diff does not edit that file.

Changeset: .changeset/12480-studio-grid-missing-rows.md (@object-ui/plugin-grid patch).

The dev run's session is session_01XVp19E1MYUTFM3dnkwz8gB (seat domain:ui#2).


Generated by Claude Code

…objectui#12480)

data-table's one-line clamp (`truncate`) bounds inline content only. The
markdown/html/richtext cell renderers draw a block document, so one long
value grew its row to the document's height and pushed later rows below
the scroll box while the footer still counted them. ObjectGrid now wraps
a rich-content column's renderer in a one-line clamp unless the column is
authored `wrap: true`.

Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Co-authored-by: Claude <noreply@anthropic.com>
@github-actions

Copy link
Copy Markdown
Contributor

✅ Console Performance Budget

Metric Value Budget
Eager closure (gzip, 69 chunks) 3082.7 KB 3119.4 KB
Main entry chunk (gzip) 73.3 KB 350 KB
Entry file index-BX1X_f-q.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) 20.90KB 7.67KB
app-shell (runtime-config.js) 22.59KB 7.89KB
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) 40.22KB 10.61KB
auth (AuthShell.js) 3.49KB 1.40KB
auth (ForgotPasswordForm.js) 12.21KB 3.45KB
auth (LoginForm.js) 18.15KB 5.40KB
auth (PreviewBanner.js) 0.90KB 0.50KB
auth (RegisterForm.js) 6.72KB 2.24KB
auth (SocialSignInButtons.js) 9.70KB 3.93KB
auth (UserMenu.js) 3.39KB 1.21KB
auth (auth-gate-events.js) 1.62KB 0.83KB
auth (authStyles.js) 5.04KB 1.72KB
auth (createAuthClient.js) 41.19KB 11.12KB
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) 594.75KB 143.42KB
core (index.js) 10.18KB 4.04KB
create-plugin (index.js) 27.94KB 9.51KB
data-objectstack (index.js) 254.55KB 71.19KB
fields (index.js) 282.89KB 72.11KB
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.67KB 11.85KB
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) 201.72KB 48.07KB
plugin-dashboard (index.js) 143.88KB 38.88KB
plugin-designer (index.js) 233.95KB 50.08KB
plugin-detail (index.js) 262.16KB 69.28KB
plugin-editor (index.js) 2.23KB 1.05KB
plugin-form (index.js) 179.38KB 46.59KB
plugin-gantt (index.js) 178.36KB 45.08KB
plugin-grid (index.js) 262.33KB 72.76KB
plugin-kanban (index.js) 53.23KB 16.71KB
plugin-list (index.js) 127.76KB 32.64KB
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) 93.05KB 23.86KB
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.63KB 39.56KB
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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

2 participants