Skip to content

fix: use correct width for horizontal elevated card media#11283

Merged
web-padawan merged 3 commits intomainfrom
fix/card-horizontal-elevated
Mar 9, 2026
Merged

fix: use correct width for horizontal elevated card media#11283
web-padawan merged 3 commits intomainfrom
fix/card-horizontal-elevated

Conversation

@web-padawan
Copy link
Member

@web-padawan web-padawan commented Mar 9, 2026

Description

Fixes #11243

The CSS for elevated variant overrides width to use (var(--_padding) + var(--vaadin-card-border-width)) * 2.
However, in case of the horizontal variant this is wrong as padding should not be multiplied. This PR fixes that.

Type of change

  • Bugfix

@jouni
Copy link
Member

jouni commented Mar 9, 2026

Pushed a fix for stretched-media height in horizontal orientation. Need to update the screenshots again.

@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 9, 2026

@web-padawan
Copy link
Member Author

Updated the screenshots.

@web-padawan web-padawan removed the request for review from DiegoCardoso March 9, 2026 12:53
@web-padawan web-padawan merged commit 8151829 into main Mar 9, 2026
12 of 13 checks passed
@web-padawan web-padawan deleted the fix/card-horizontal-elevated branch March 9, 2026 12:53
vaadin-bot pushed a commit that referenced this pull request Mar 9, 2026
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
web-padawan added a commit that referenced this pull request Mar 9, 2026
…11293)

Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>
@vaadin-bot
Copy link
Collaborator

This ticket/PR has been released with Vaadin 25.1.0-beta3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[card] horizontal variant doesn't work correctly together with cover/stretch-media variants

3 participants