@streamscloud/embeddable 16.2.1 → 16.2.3

package/dist/ads/ad-card/cmp.ad-card.svelte

@@ -142,14 +142,14 @@ const handleAdClick = () => {
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  min-height: 3rem;
+  height: 3rem;
   overflow: hidden;
   min-width: 0;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
   .ad-card__price-container {
-    min-height: 2rem;
+    height: 2rem;
   }
 }
 .ad-card__button-container {
@@ -157,15 +157,13 @@ const handleAdClick = () => {
   display: flex;
   justify-content: center;
   align-items: end;
-  min-height: 2.5rem;
-  margin-top: 0.125rem;
+  margin-top: 0.625rem;
   min-width: 0;
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 230px) {
   .ad-card__button-container {
-    min-height: 2rem;
-    margin-top: 0.0938rem;
+    margin-top: 0.375rem;
   }
 }
 .ad-card__button-text {

package/dist/products/product-card/cmp.product-card.svelte

@@ -46,7 +46,7 @@ const onBuyClicked = (event) => {
 };
 </script>
 
-<div class="product-card" inert={inert} use:trackImpression>
+<div class="product-card" class:product-card--with-buy={!!on?.buy} inert={inert} use:trackImpression>
   <ProportionalContainer ratio={1}>
     <Image src={product.image} />
   </ProportionalContainer>
@@ -123,6 +123,9 @@ const onBuyClicked = (event) => {
     padding: 0.5rem 0.5rem 0.75rem;
   }
 }
+.product-card--with-buy {
+  aspect-ratio: auto;
+}
 .product-card__info {
   display: flex;
   flex-direction: column;
@@ -191,7 +194,7 @@ const onBuyClicked = (event) => {
 .product-card__buy {
   position: relative;
   z-index: 1;
-  margin-top: 0.375rem;
+  margin-top: 0.625rem;
   --sc-kit--button--background: light-dark(
     var(--sc-player--light--card-button, #f2f2f2),
     var(--sc-player--dark--card-button, #2e2e2e)
@@ -201,7 +204,7 @@ const onBuyClicked = (event) => {
 }
 @container (width < 230px) {
   .product-card__buy {
-    margin-top: 0.25rem;
+    margin-top: 0.375rem;
   }
 }
 .product-card__link {

package/dist/ui/player/player/controls-and-attachments.svelte

@@ -54,7 +54,7 @@ const showCloseButton = $derived.by(() => {
   <div
     class="controls-and-attachments"
     style:--player--controls--attachments-max-width="{uiManager.attachmentsMaxWidth}px"
-    style:--player--controls--spacing-top={closeButtonAreaHeight?`${closeButtonAreaHeight}px`:''}
+    style:--player--controls--spacing-top="{closeButtonAreaHeight}px"
     style:--player--controls--width="{uiManager.sidePanelsMaxWidth}px">
     <div class="controls-and-attachments__spacer">&nbsp;</div>
     <div class="controls-and-attachments__left">
@@ -94,7 +94,7 @@ const showCloseButton = $derived.by(() => {
 
 <style>.controls-and-attachments {
   --_player--controls--attachments-max-width: var(--player--controls--attachments-max-width);
-  --_player--controls--spacing-top: var(--player--controls--spacing-top);
+  --_player--controls--spacing-top: var(--sc-mc--player--controls--spacing-top, var(--player--controls--spacing-top));
   --_player--controls--width: var(--player--controls--width);
   position: absolute;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "16.2.1",
+  "version": "16.2.3",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",