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

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

Author: 3 people

packages/aura/src/components/card.css

@@ -28,7 +28,11 @@ vaadin-card[theme~='cover-media'] [slot='media']:is(img, video, svg, vaadin-icon
   /* TODO relies on internal API - should refactor base styles to support this (background-clip: padding-box) */
   margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
   margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
-  width: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
+  width: calc(var(--_media-width) + var(--vaadin-card-border-width) * 2);
+}
+
+vaadin-card[theme~='cover-media'][theme~='horizontal'] [slot='media']:is(img, video, svg, vaadin-icon) {
+  height: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
 }
 
 vaadin-card[theme~='elevated'] {

packages/card/src/styles/vaadin-card-base-styles.js

@@ -229,14 +229,22 @@ export const cardStyles = css`
     height: 100%;
   }
 
+  :host([theme~='cover-media']) {
+    --_media-width: calc(100% + var(--_padding) * 2);
+  }
+
+  :host([theme~='horizontal'][theme~='cover-media']) {
+    --_media-width: calc(100% + var(--_padding));
+  }
+
   :host([theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
     border-radius: inherit;
     border-end-end-radius: 0;
     border-end-start-radius: 0;
     margin-inline: calc(var(--_padding) * -1);
     margin-top: calc(var(--_padding) * -1);
     max-width: none;
-    width: calc(100% + var(--_padding) * 2);
+    width: var(--_media-width);
   }
 
   :host([theme~='horizontal'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
@@ -245,7 +253,6 @@ export const cardStyles = css`
     border-start-end-radius: 0;
     height: calc(100% + var(--_padding) * 2);
     margin-inline-end: 0;
-    width: calc(100% + var(--_padding));
   }
 
   /* Scroller in content */

packages/card/test/visual/aura/card.test.js

@@ -88,4 +88,14 @@ describe('card', () => {
     element = mediaFixture(false, 'cover-media');
     await visualDiff(div, 'cover-media-icon');
   });
+
+  it('cover-media-elevated-horizontal', async () => {
+    element = mediaFixture(true, 'cover-media elevated horizontal');
+    await new Promise((resolve) => {
+      element.querySelector('img').onload = async () => {
+        await visualDiff(div, 'cover-media-elevated-horizontal');
+        resolve();
+      };
+    });
+  });
 });

packages/card/test/visual/aura/screenshots/dark/card/baseline/cover-media-elevated-horizontal.png

@@ -209,6 +209,18 @@ describe('card', () => {
         };
       });
     });
+
+    it('horizontal-elevated-cover-media', async () => {
+      element = fixtureSync(complexCard, div);
+      element.setAttribute('theme', 'horizontal elevated cover-media');
+      element.style.setProperty('width', '400px');
+      await new Promise((resolve) => {
+        element.querySelector('img').onload = async () => {
+          await visualDiff(div, 'theme-horizontal-elevated-media-cover');
+          resolve();
+        };
+      });
+    });
   });
 
   describe('custom properties', () => {

packages/card/test/visual/aura/screenshots/default/card/baseline/cover-media-elevated-horizontal.png

@@ -33,6 +33,11 @@
   :host([theme~='elevated'][theme~='cover-media']) ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
     margin-top: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
     margin-inline: calc((var(--_padding) + var(--vaadin-card-border-width)) * -1);
-    width: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
+    width: calc(var(--_media-width) + var(--vaadin-card-border-width) * 2);
+  }
+
+  :host([theme~='elevated'][theme~='horizontal'][theme~='cover-media'])
+    ::slotted([slot='media']:is(img, video, svg, vaadin-icon)) {
+    height: calc(100% + (var(--_padding) + var(--vaadin-card-border-width)) * 2);
   }
 }