fix(VCST-4388): vc-product-button goes beyond the vc-line-items variations-default (#2089)

vas11yev1work · web-flow · commit 4060462158fb · 2025-12-03T10:43:05.000+01:00
## Description Before: <img width="1197" height="281" alt="image" src="https://github.com/user-attachments/assets/59b6485e-bb98-443b-8d9b-f6cf39fb2d1a" /> After: <img width="1163" height="288" alt="image" src="https://github.com/user-attachments/assets/e60606c7-c131-4da9-a84c-b12e616302e1" /> ## References ### Jira-link: https://virtocommerce.atlassian.net/browse/VCST-4388 ### Artifact URL: https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.36.0-pr-2089-3879-38793a04.zip
diff --git a/client-app/ui-kit/components/molecules/product-button/vc-product-button.vue b/client-app/ui-kit/components/molecules/product-button/vc-product-button.vue
@@ -119,15 +119,17 @@ withDefaults(defineProps<IProps>(), {
   }
 
   @at-root .vc-product-card {
-    #{$self} {
+    $wrapperSelector: "> .vc-product-card__wrapper #{$self}";
+
+    #{$wrapperSelector} {
       @apply mt-3;
 
       grid-area: add-to-cart;
     }
 
     &--view-mode {
       &--grid {
-        #{$self} {
+        #{$wrapperSelector} {
           @apply order-7 min-h-[3.375rem];
         }
 
@@ -136,7 +138,7 @@ withDefaults(defineProps<IProps>(), {
         }
       }
 
-      &--list #{$self} {
+      &--list #{$wrapperSelector} {
         @container (min-width: theme("containers.sm")) {
           @apply w-72;
         }

Original file line number	Diff line number	Diff line change
`@@ -119,15 +119,17 @@ withDefaults(defineProps<IProps>(), {`
`119`	`119`	`}`
`120`	`120`
`121`	`121`	`@at-root .vc-product-card {`
`122`		`- #{$self} {`
	`122`	`+ $wrapperSelector: "> .vc-product-card__wrapper #{$self}";`
	`123`	`+`
	`124`	`+ #{$wrapperSelector} {`
`123`	`125`	`@apply mt-3;`
`124`	`126`
`125`	`127`	`grid-area: add-to-cart;`
`126`	`128`	`}`
`127`	`129`
`128`	`130`	`&--view-mode {`
`129`	`131`	`&--grid {`
`130`		`- #{$self} {`
	`132`	`+ #{$wrapperSelector} {`
`131`	`133`	`@apply order-7 min-h-[3.375rem];`
`132`	`134`	`}`
`133`	`135`
`@@ -136,7 +138,7 @@ withDefaults(defineProps<IProps>(), {`
`136`	`138`	`}`
`137`	`139`	`}`
`138`	`140`
`139`		`- &--list #{$self} {`
	`141`	`+ &--list #{$wrapperSelector} {`
`140`	`142`	`@container (min-width: theme("containers.sm")) {`
`141`	`143`	`@apply w-72;`
`142`	`144`	`}`