Skip to content

Icons look misaligned for a simple upload status row #8768

Open
@Legioth

Description

@Legioth

Description

A file row in <vaadin-upload> without any extra info seems to have inappropriate alignment for both the status icon and the remove icon. The status is slightly below the text baseline whereas the remove icon is significantly above. This looks slightly better when there's more content in the row but is disturbing for the simple case with only a file name.

This is what it looks like with Chrome's layout overlay active as a visual ruler.
Image

Expected outcome

Expected that the icons are aligned with the text. Or with themselves. Or with anything.

Minimal reproducible example

This is clearly visible in the first example on https://vaadin.com/docs/latest/components/upload

Steps to reproduce

  1. Open https://vaadin.com/docs/latest/components/upload
  2. 👁
  3. 😢

Environment

Vaadin version(s): 24.7.0.beta1

Browsers

Chrome

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions