data-grid: narrow cells too wide with grid-template-columns

[WebFreak001]

Describe the bug

If cells are too narrow in width, the get sized up, causing issues with the total width of the grid.

To reproduce

Create a <vscode-data-grid> with grid-template-columns="1fr 40px 40px 40px" and css max-width: 400px on the parent of it

<div style="max-width: 400px">
	<vscode-data-grid aria-label="Source Paths"  grid-template-columns="1fr 40px 40px 40px">
		<vscode-data-grid-row row-type="header">
			<vscode-data-grid-cell cell-type="columnheader" grid-column="1">Source Path</vscode-data-grid-cell>
			<vscode-data-grid-cell cell-type="columnheader" grid-column="2">Import</vscode-data-grid-cell>
			<vscode-data-grid-cell cell-type="columnheader" grid-column="3">Source</vscode-data-grid-cell>
			<vscode-data-grid-cell cell-type="columnheader" grid-column="4">String Import</vscode-data-grid-cell>
		</vscode-data-grid-row>
		<vscode-data-grid-row>
			<vscode-data-grid-cell grid-column="1">a</vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="2"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="3"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="4"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
		</vscode-data-grid-row>
		<vscode-data-grid-row>
			<vscode-data-grid-cell grid-column="1">b</vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="2"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="3"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="4"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
		</vscode-data-grid-row>
		<vscode-data-grid-row>
			<vscode-data-grid-cell grid-column="1">c</vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="2"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="3"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
			<vscode-data-grid-cell grid-column="4"><vscode-checkbox></vscode-checkbox></vscode-data-grid-cell>
		</vscode-data-grid-row>
	</vscode-data-grid>
</div>

Expected behavior

the 3 columns should be 40 px in width, but is actually 96 px in width

Screenshots

blue focus on first line goes over width of the container, hover on second line goes to the correct width

Desktop (please complete the following information):

• OS Version: VSCode 1.62.0 on Electron 13.6.3 on ArchLinux i3 (X11)
• Toolkit Version: v0.8.5

[hawkticehurst]

How interesting/bizarre! Thanks for letting us know @WebFreak001!

I've added this to our backlog and should ideally get around to it once we've finished up the current round of priority to-do items/issues.

[daviddossett]

@WebFreak001 what would you expect to happen with the header cell text when the columns are rendered at 40px wide?

There will likely always be some tradeoffs at that size unless we explore other fallbacks like an overflow rule. Some of those fallbacks have accessibility issues, so we may need to do some digging here.

[WebFreak001]

I would probably expect ellipsis or clipping of the header if there is not enough space. When using these tiny cells most often I would need to take care of how to render the labels anyway. Long labels could also be rotated sideways by the user (like with CSS)

Most importantly I would expect the columns to not overflow like this though, so a bunch of checkbox columns can fit well.