Repository navigation
fix(plugin-dashboard): a metric tile's value scales before it would clip (objectui#12942) - #12950
Merged
objectstack-fleet[bot] merged 1 commit intoOct 18, 2026
Merged
Conversation
A money KPI such as 1,290,000.00 drew at 20 px in a 156 px tile and 24 px in a 174 px one, and was cut with an ellipsis. The plain tiles now pick a size ladder by the value's width: each container-query step starts where that size fits the Card's value room. A short value keeps today's face. Co-authored-by: Claude <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XVp19E1MYUTFM3dnkwz8gB
Contributor
✅ 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
|
objectstack-fleet
Bot
deleted the
claude/issue-12942-metric-value-scale
branch
October 18, 2026 08:56
This was referenced Oct 18, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #12942
Clause-②: no
What changed
A metric tile's value now scales before it would clip.
packages/plugin-dashboard/src/metricTile.tsgains a size ladder,METRIC_TILE_VALUE_LADDER, andmetricTileValueClass(value)picks a rung by how wide the value draws (metricTileValueEm, an upper bound read off Inter's bold tabular figures).MetricWidget(and through itObjectMetricWidgetand everyobject-metricpage block) andMetricCardread it. The tile's span is unchanged:page-block-span.tsis not touched.4,210): today's face, unchanged. 20 px below a 160 px container, 24 px from 160 px up, no tooltip.@[N px]:step starts atceil(48 + maxEm * px), where 48 px is the Card's value inset (CardContent's 24 px side padding; the container query reads the Card's content box, inside its 1 px border). The new test re-derives every step from that formula.@container, unchanged). Widths are the container's content box. The rung a seven-digit money value with cents takes (6.75 em) istext-sm @[156px]:text-base @[170px]:text-lg @[183px]:text-xl @[210px]:text-2xl. Other rungs: 5.5 em at 136 / 147 / 158 / 180; 8 em at 176 / 192 / 208 / 240; 10 em at 208 / 228 / 248 / 288; 12.5 em at 248 / 273 / 298 / 348.titletooltip. The figure is never cut silently. The threshold is a value wider than (container − 48) / 14 em. At the narrowest measured tile (156 px, container 154) that is about 7.5 em of real width (106 px at 14 px). An eleven-digit money value (12,345,678,901.00) ellipsizes below a 200 px tile;$1,290,000.00still fits at 156 px. The 6.75 em rung's 14 px base also clips in a tile narrower than about 145 px.Browser reading (A4)
Chromium (
/opt/pw-browsers/chromium), Inter installed, Tailwind 4.3.3 compiling the real class strings fromorigin/main(before) and this branch (after). Markup:@container+ 1 px border tile of the given width, a 24 px side-padded content box, and the value withMetricWidget'sfont-bold tracking-tight. Read as valuescrollWidth/clientWidth.1,290,000.001,290,000.002,017,500.002,017,500.004,210(control)12,345,678,901.00The "before" figures match the card's measurement exactly (126 / 106 at 1024 px, 152 / 124 at 1440 px).
MetricCard(font-boldwithout tracking) reads the same at 156 and 174 px. No screenshots are attached; these numbers are the reading.Tests
On
0f9795def1:metricTileValueScale-12942.test.tsx(new, 8 tests). (a) Anobject-metricblock withfallbackValue: 1290000, format: '0,0.00'draws1,290,000.00on the scaled rung, not the clipping@[160px]:text-2xlface: 14 px at the 156 px tile, 18 px at the 174 px tile, with the full figure intitle. (b) CONTROL:4,210keepstext-xl @[160px]:text-2xlwith no tooltip. The test also re-derives every ladder step and checksMetricWidgetandMetricCardboth read the ladder.MetricWidgetreverted toMETRIC_TILE_VALUE_CLASSon the committed tree, 2 failed / 6 passed (the object-metric and the MetricWidget-and-MetricCard tests), and the control stayed green. Restored withgit checkout HEAD --,git diff HEADempty, blob hash equal to HEAD.METRIC_TILE_VALUE_CLASS,metricTile,MetricWidget,MetricCardorobject-metric: 36 files / 378 tests passed. That includesmetricTileLayout-12623, whose short-value pins hold unchanged.pnpm --filter @object-ui/plugin-dashboard type-checkexit 0, after the closure build.tsconfig.test.jsonlists the new test file.eslintform): 0 errors, 1 existing warning (react-refresh/only-export-componentsonmetricPatternDecimals).check-hand-rolled-comment-mask,check-changeset-fixed,check-changeset-presenceandcheck:new-line-citations.packages/plugin-dashboard/directory run.Acceptance notes
DatasetWidget, with a heading) stays onMETRIC_TILE_VALUE_CLASS. It has no Card inset: its value gets the container's whole width, so a Card-measured ladder would shrink it earlier than needed. The constant's doc comment says why. It is not measured as clipping here.Generated by Claude Code