Improved mini-table resource name truncation

[benjaminleonard]

Fixes #2999

The problem with the <Truncate> component is that it isn't aware of the size of the container, so you need a very conservative number and even then, due to the variable width of characters, it is not a reliable solution.

Let's assume we always want the first cell to fill the width (needs some investigation in case there are outliers here). We can absolutely position the text within it, fill the size of the container and CSS truncate the text. Also prevents either from wrapping.

I still think we might want a pattern to show more properties that are not represented here, e.g. source. Or we allow the user to re-open the modal to see the properties and edit their choices.

Draft, needs further testing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
console	Ready	Preview	Apr 16, 2026 3:13pm

[benjaminleonard]

Okay this is problematic if the other columns are long also, might need another approach.

[benjaminleonard]

My first approach previously only supported truncation on the first column (via w-full). But tables with multiple text columns that could overflow (like the network interface table with Name, VPC, and Subnet) had no way to truncate gracefully.

Trying an alternate approach

Pre-generated font metrics (tools/gen-font-widths.ts): A build-time script reads the actual font files using, extracts character widths, and writes them to app/ui/lib/font-widths.gen.ts.

Pure arithmetic text measurement (app/ui/lib/text-width.ts): textWidth(str) sums the pre-generated character width ratios — no Canvas, no DOM, no layout reflow. I had initially considered using the pretext lib or measureText but we only need widths.

Proportional column widths in MiniTable: For each text column, we find the max text width across all rows, then distribute the available table width proportionally. A floor of 1/N (where N = number of text columns) prevents short-text columns from collapsing to a sliver. Non-text columns (cell) remain fit-to-content.

In theory we could just take the string length as our proportional measurement. It would probably get use 90% of this use case. But I'd like to expand this to more intelligent truncation elsewhere, like IDs on the properties table.

Column API change:
Columns can use cell for custom rendering (badges, components), or text for auto-truncation with proportional sizing:

columns={[
  { header: 'Name', text: (item) => item.name },        // proportional + truncate
  { header: 'Action', cell: (item) => <Badge>...</Badge> }, // fit to content
]}

---

Examples:

Additional disks

Add NIC

---

The ceiling and floor could do with some tweaks, but broadly it accommodates a wider range of widths without truncation. And it no longer wraps.

[benjaminleonard]

Also added a tooltip that only renders if its truncated:

[benjaminleonard]

This could be even more clever by using absolute pixel widths and being container aware. That way if its still got space but a another column is truncated adjusting to fit. But I'm not sure it's worth the extra complexity and DOM measurements.