Makes data table add column sticky

[hoonji]

Motivation for features / changes

The add column button in the runs table will be hidden when the table is wide, which will often be the case. This makes the "add" feature very difficult to discover.

context: b/332788091

Technical description of changes

• Moves the add button column outside of and adjacent to the data table (previously it was a column of the table) and makes it sticky
• Adds additional configuration options to data table to allow runs and scalar tables to have slightly different designs

Screenshots of UI changes (or N/A)

Notice the add column is fixed to the right:

Scalar table add column is slightly narrower:

Alternate designs / implementations considered (or N/A)

• Tried adding the add columns to the consumer components of the data table (runs data table and scalar card data table) instead. But this led to too much code duplication in the components and templates.
• Tried making the add column a regular table column, instead of adding it outside in a separate div. But making the column sticky requires styling the table rows, which data table doesn't provide access to (rows are configured solely in the consumer components). Also, the chosen implementation is arguably more consistent with the current design as the add "column" doesn't actually function as a table column at all

[hoonji]

This needs testing, but I think screenshot tests will more appropriate here (rather than programmatically testing css structure, which is subject to change). PLMK if the code looks good, and I'll add some 1p tests before submitting this.

[bmd3k]

I feel a little underqualified to review this PR. I think the change is fine but I recognize that Riley and James spent much more time discussing this button than I did. I defer to them.

[rileyajones]

I'm totally fine with your approach to making this button sticky and I do like it being sticky.
My biggest feedback is that making the entire column stick exacerbates the white space issue.

One potential solution would be to make just the button sticky and add space at the end of the table so that it can be scrolled out of the table. I'm not sure if that would end up feeling kludgy though so I'll leave it to your judgement.

[rileyajones]

nitpick:

Suggested change

	[class.small-add-button]="addColumnSize == AddColumnSize.SMALL"
	[class.small-add-button]="addColumnSize === AddColumnSize.SMALL"

[hoonji]

Fixed

[rileyajones]

I'm pretty opposed to using !important as it eventually spirals into an arms race.
If you updated the template to use a css variable, then changed the value of the variable here you wouldn't have to use !important.

[hoonji]

Oh this is great, done!

[hoonji]

One potential solution would be to make just the button sticky and add space at the end of the table so that it can be scrolled out of the table

Loved this idea at first:

But after trying it out, it indeed looks & feels a bit hacky, and it also unfortunately breaks the vertical stickyness (sticky seems to be very brittle to minor changes in general).

Thus, IMO the column with whitespace is the lesser of evils and may be the best we can do atm without dedicated design support.