From 19554d4befc6f92536d142b528a168e6899c50b5 Mon Sep 17 00:00:00 2001
From: Diego Alba <diegoalba15@icloud.com>
Date: Wed, 26 Jan 2022 14:37:23 -0500
Subject: [PATCH] fix(theme): product bundle visual issue

---
 .../Products/BundleProductSelector.vue        | 23 ++++++++++++++-----
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/packages/theme/components/Products/BundleProductSelector.vue b/packages/theme/components/Products/BundleProductSelector.vue
index 763fa2014..e47411602 100644
--- a/packages/theme/components/Products/BundleProductSelector.vue
+++ b/packages/theme/components/Products/BundleProductSelector.vue
@@ -24,11 +24,13 @@
             <template
               v-if="bundle.options.length === 1"
             >
-              {{ productGetters.getName(option.product) }}
-              <SfPrice
-                :regular="$fc(productGetters.getPrice(option.product).regular)"
-                :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
-              />
+              <div class="bundle_products--options-option__container">
+                <p>{{ productGetters.getName(option.product) }}</p>
+                <SfPrice
+                  :regular="$fc(productGetters.getPrice(option.product).regular)"
+                  :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
+                />
+              </div>
             </template>
             <template
               v-else
@@ -177,9 +179,12 @@ export default defineComponent({
   &--item {
       padding: 0 0 var(--spacer-base) 0 !important;
       border-bottom: 1px solid #e4e4e4 !important;
-
+      .sf-quantity-selector{
+        margin: 0 var(--spacer-sm) !important;
+      }
       p {
         font-weight: 600;
+        padding: 0 var(--spacer-sm);
       }
       &-required{
         &:after{
@@ -192,7 +197,13 @@ export default defineComponent({
     }
 
   &--options{
+
     &-option{
+      &__container {
+       p, .sf-price {
+        padding: 0 var(--spacer-sm) !important;
+       }
+      }
       .sf-price{
         &:before{
           content: '+';