fix: align icons and buttons in upload file row #8931
Conversation
| [part='commands'] { | ||
| display: flex; | ||
| align-items: baseline; | ||
| align-self: flex-start; |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
@rolfsmeds Please take a look, I'm not sure if the changes are acceptable as a bugfix for a patch version. |
jouni
left a comment
jouni
left a comment
There was a problem hiding this comment.
As far as I know, start equals flex-start. It’s just shorter, less bytes.
Co-authored-by: Jouni Koivuviita <[email protected]>
|
Not quite: |
|
Rolf: oh, that’s good to know. Thanks! |
web-padawan
left a comment
web-padawan
left a comment
There was a problem hiding this comment.
If we want to proceed with the change, let's rebase the PR to use Lumo CSS.
|
Closing in favor of #10059 which changed upload-file to use CSS grid also in Lumo. |
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 useflex-startinstead. 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