Skip to content

fix(plugin-dashboard): a layout-less metric tile spans one row, and a geometry pin holds one-row tiles at content height (objectui#12704) - #12857

Merged
objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12704-metric-tile-height-pin
Oct 17, 2026
Merged

objectstack-fleet[bot] merged 2 commits into
mainfrom
claude/issue-12704-metric-tile-height-pin

Conversation

@objectstack-fleet

Copy link
Copy Markdown
Contributor

Fixes #12704
Clause-②: no

What changed

  • One default (packages/plugin-dashboard/src/DashboardRenderer.tsx, fallbackSpan in renderWidget): on a dashboard that declares columns, a metric widget with no layout now spans h: 1 instead of h: 2. That is the height DashboardEditor's addWidget gives a new widget. Non-metric widgets keep h: 4. An authored layout.h is unchanged.
  • The geometry pin e2e/dashboard-metric-tile-height.spec.ts, beside e2e/sidebar-offcanvas-geometry.spec.ts. It bundles the real DashboardRenderer and its imports from source with Vite (each @object-ui/* resolved to its src/, built in memory). It mounts the bundle in Chromium with React's client renderer, so the dataset tile goes through its real loading effect. The data source is a stub queryDataset (the dataSource prop the renderer takes). No server runs. The stylesheet is the real theme sheet, packages/components/src/index.css, compiled with Tailwind for the classes on the page.
  • The default's unit pin packages/plugin-dashboard/src/__tests__/DashboardRenderer.metricFallbackSpan-12704.test.tsx: a layout-less metric spans span 3 / span 1. Two CONTROLs: an authored layout.h: 2 keeps span 2, and a layout-less table keeps span 6 / span 4.
  • A patch changeset for @object-ui/plugin-dashboard.
  • Unchanged, as rulings B and B′ bind: the grid rule (minmax(5rem, auto), span h), MetricCard.tsx, the tile padding and chrome, DashboardEditor.tsx. No packages/spec change.

Why the pin is a Playwright spec

The claims are heights the grid computes. jsdom has no layout engine, so the __tests__ shape could only pin the span, and it does that for the default. Its stub is a JavaScript object, not a server, so the ruling's fallback (letter D) does not apply.

Measured heights (Chromium, light, 12 columns, quarter-width tile)

case 1280 px 1024 px
h: 1, bare value (title, value, measure label) 124.38 124.38
h: 1, with a delta line 146.38 146.38
h: 2 CONTROL 176 (2 x 80 + 16) 176
bare and delta in one row both 146.38 both 146.38

The 1280 readings equal the earlier live console measurement on the HotCRM scratch dashboard (124.38 / 146.38 / 176). At 1024 the fixture has no sidebar, so the tile stays wider than 160 px and its measure label shows. In the console with the sidebar, the tile was narrower and measured 117.75 px. The pin asserts relations, not pixel equality across fonts:

  • a one-row box ends at its last line plus the padding and border below it (25 px here);
  • the delta tile is taller than the bare one;
  • the h: 2 tile is two rows plus the gap, with more than 40 px of empty lower half;
  • tiles in one row align on the tallest.

Screenshots, evidence branch only (never merged):

The two metadata cards

Neither has landed. On objectstack main 9ffe8af System Overview's 6 metric tiles are still h: 2 (objectstack-ai/objectstack#24126). On hotcrm main 4f82b81 Sales Performance's KPI tiles are still h: 2 (objectstack-ai/hotcrm#2135). The screenshot acceptance of Sales Performance and System Overview waits for them, as ruled.

Test evidence (HEAD a20446a)

  • The pin: CI=1 playwright test with the repo's playwright.config.ts, project chromium, on e2e/dashboard-metric-tile-height.spec.ts and e2e/sidebar-offcanvas-geometry.spec.ts: 8 expected, 0 unexpected, 0 flaky. Local differences from CI: a launch executablePath for the preinstalled Chromium, and no console preview server (neither spec uses it). Stable over --repeat-each=4.
  • Ablations, each through ablation-replace with on-disk proof and a restore to git diff HEAD empty:
    • bare tile forced to h: 2: red (span check);
    • row floor minmax(5rem, auto) changed to minmax(12rem, auto), span unchanged: red, "bare: the one-row box runs 67.63px past its content and padding";
    • default reverted to h: 2: the unit pin goes red (expected span 1, received span 2) and both CONTROLs stay green.
  • pnpm --filter @object-ui/plugin-dashboard test: exit 0, 183 files passed, 1814 tests passed, 6 skipped (run on b6dfaf0; no plugin-dashboard file changed after it).
  • type-check, lint, build for @object-ui/plugin-dashboard: exit 0 each (lint warnings only, none on changed lines).
  • pnpm type-check:e2e exit 0. scripts/__tests__/e2e-type-check.test.ts 15/15. ESLint on the touched files exit 0.
  • node scripts/check-changeset-presence.mjs exit 0. pnpm check:new-line-citations reports 0 new.

Acceptance notes

  • defaultWidgetPlacement in packages/types still gives every layout-less widget h: 4 in the editable grid (DashboardGridLayout, the DashboardWithConfig sliders), metrics included. The read grid now says 1 row for a layout-less metric, while edit mode says 4. That function is outside this card's claimed files, so it is untouched here. Not reproduced live.

Session: https://claude.ai/code/session_01BxWPtU5qnbTX3RoZJqNSza


Generated by Claude Code

… geometry pin holds one-row tiles at content height (objectui#12704)

On a dashboard that declares `columns`, a metric widget with no `layout`
now spans one grid row instead of two, the height the designer gives a
new widget. The row floors at 5rem and grows to the tile's content, so
the second row was the tile's empty lower half. Non-metric widgets keep
four rows; an authored `layout.h` is unchanged.

e2e/dashboard-metric-tile-height.spec.ts bundles the real
DashboardRenderer from source, mounts it in Chromium with a stub
`queryDataset`, and measures a bare one-row tile, a one-row tile with a
delta line and a two-row CONTROL at 1280 and 1024 px.

Claude-Session: https://claude.ai/code/session_01BxWPtU5qnbTX3RoZJqNSza
Co-authored-by: Claude <noreply@anthropic.com>
… keep its readings and picture (objectui#12704)

- Compile the Tailwind sheet until the page's class set stops growing: a
  one-shot sheet sometimes missed a class added by a later render (the
  card's `border`), moving the reading by 2 px between runs.
- Import the i18n provider by source path, so the spec names no
  workspace package in an import statement (the e2e type-check premise).
- Record the readings as a test annotation (no console statement) and
  attach a full-page screenshot under test-results.

Claude-Session: https://claude.ai/code/session_01BxWPtU5qnbTX3RoZJqNSza
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.7 KB 350 KB
Entry file index-BuFzeCgo.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#12704 · head a20446a · 2026-10-17T04:34Z

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 #12704, and the second is Clause-②: no, as the re-dispatch claim declares (6229218246).
    • Two commits, each carrying only the model-free trailer pair.
    • git merge-tree against current main is clean. 4 files, +515 / −2, all in the claimed surface. No PNG.
  • Rulings B and B′, as bound:

    • The one default: in DashboardRenderer's fallbackSpan, a layout-less metric on a columns dashboard spans h: 1, the height DashboardEditor's addWidget gives a new widget. Non-metric widgets keep h: 4. An authored layout.h is unchanged.

    • The one geometry pin: e2e/dashboard-metric-tile-height.spec.ts, beside sidebar-offcanvas-geometry.spec.ts. It bundles the real DashboardRenderer from source, mounts it in Chromium, and compiles the real theme sheet.

    • The stub: a queryDataset object passed as the renderer's dataSource prop. No server runs, so the fallback under letter D does not apply.

    • Unchanged, as bound:

      • the grid rule: minmax(5rem, auto) and span h;
      • MetricCard.tsx;
      • the tile padding and chrome;
      • DashboardEditor.tsx.

      None of these is in the diff.

  • Mechanism assumptions: all three held. Add public roadmap, VitePress documentation site, and GitHub Pages deployment #3 is amended: DatasetWidget loads its data in an effect, so a server render would show only the skeleton. The fixture therefore mounts on the client.

  • Measured heights (Chromium, light, 12 columns, quarter-width tile):

    case 1280 px 1024 px
    h: 1, bare value 124.38 124.38
    h: 1, with a delta line 146.38 146.38
    h: 2 CONTROL 176 (2 × 80 + 16) 176
    bare and delta in one row both 146.38 both 146.38

    The 1280 readings equal the earlier live console measurement on the HotCRM scratch dashboard (124.38 / 146.38 / 176). The pin asserts relations, not pixels:

    • a one-row box ends 25 px (its padding and border) below its last line;
    • the delta tile is taller than the bare one;
    • the h: 2 tile is two rows plus the gap;
    • tiles in one row align on the tallest.
  • Screenshots, read by the seat (never-merged claude/issue-12704-evidence-2 at e1483b8), 1280 px and 1024 px light. They show:

    • the bare tile hugging its three lines;
    • the delta tile one line taller;
    • the h: 2 CONTROL with its empty lower half;
    • the bare-and-delta pair aligned in one row.

    Sent to the maintainer at 2026-10-17T04:34Z.

  • Tests:

    • The unit pin DashboardRenderer.metricFallbackSpan-12704.test.tsx: a layout-less metric spans span 3 / span 1. Two CONTROLs: an authored h: 2 keeps span 2, and a layout-less table keeps span 6 / span 4.
    • Three ablations went red, each through ablation-replace and each restored to an empty git diff HEAD:
      • the bare case forced to h: 2;
      • the row floor raised to 12rem: "the one-row box runs 67.63px past its content and padding";
      • the default reverted to h: 2: the unit pin goes red, and its CONTROLs stay green.
    • @object-ui/plugin-dashboard in full: 183 files, 1814 tests passed. type-check, lint and build for the package, type-check:e2e and the e2e type-check test: all exit 0.
  • Changeset: @object-ui/plugin-dashboard patch; user-facing prose.

  • CI: running at this record. The dev ran the geometry spec with a scratch config, because the container's Chromium revision differs from Playwright's. Build & E2E on this PR is the first run with the literal spelling, and landing waits for it to go green.

Rulings

  1. The fixture mounts on the client: A, as built. It measures the tile a metadata dashboard reaches, through the real loading effect, and adds no test-only seam to the renderer. B would need product code written for the test.
  2. The metadata halves: platform-objects: System Overview's six metric tiles declare layout.h: 2 and draw a half-empty box; set them to h: 1 (ruling B on objectui#12704) objectstack#24126 (System Overview) and dashboards: every h: 2 metric tile draws a half-empty box at 1024 px; set them to h: 1, keep the two deliberate h: 4 (ruling B on objectui#12704) hotcrm#2135 (Sales Performance) are open. Their screenshot acceptance stays theirs, as ruled. This PR closes the renderer's half: the default and the pin.
  3. defaultWidgetPlacement (edit mode gives a layout-less widget h: 4): noted, not filed. The read and edit grids disagreed before this PR (2 against 4) and still do (1 against 4). The function is outside this card's 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_01BxWPtU5qnbTX3RoZJqNSza, branch claude/issue-12704-metric-tile-height-pin


Generated by Claude Code

@objectstack-fleet

Copy link
Copy Markdown
Contributor Author

Landing · head a20446a · 2026-10-17T04:40Z


Generated by Claude Code

@objectstack-fleet
objectstack-fleet Bot marked this pull request as ready for review October 17, 2026 04:41
@objectstack-fleet
objectstack-fleet Bot enabled auto-merge October 17, 2026 04:41
@objectstack-fleet
objectstack-fleet Bot added this pull request to the merge queue Oct 17, 2026
Merged via the queue into main with commit db4417e Oct 17, 2026
37 checks passed
@objectstack-fleet
objectstack-fleet Bot deleted the claude/issue-12704-metric-tile-height-pin branch October 17, 2026 04:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dashboard metric tiles size to their content: a single-number tile is not 135 px tall with an empty lower half

2 participants