fix: align icons and buttons in upload file row

[sissbruecker]

Description

Currently all flex containers in upload file row use align-items: baseline, which makes it hard to align icons and buttons with the first text line. Changed icons and the commands container that contains buttons to use flex-start instead. Then applied the same solution we use for aligning icons and buttons with the first line of text in text area.

This is potentially a breaking change as it changes default styles, appearance, as well as the default height of the component (it gets a bit smaller).

Fixes #8768

Type of change

• Bugfix

[sissbruecker]

Maybe we should just change it to use align-items: flex-start everywhere. Using baseline as a default doesn't seem particularly useful for the elements that the upload file row contains.

[rolfsmeds]

It occurred to me that the whole row would be better implemented as a css grid... which we could definitely do in V25, and possibly in a minor.

[sissbruecker]

@rolfsmeds Please take a look, I'm not sure if the changes are acceptable as a bugfix for a patch version.

[jouni]

As far as I know, start equals flex-start. It’s just shorter, less bytes.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[rolfsmeds]

As far as I know, start equals flex-start. It’s just shorter, less bytes.

Not quite: flex-start is unaffected by row-reverse while start is flipped by it. But it doesn't matter here of course.

[jouni]

Rolf: oh, that’s good to know. Thanks!