fix(atomic): no break word for product-price + truncate/wrap (#4055)

JIRA ticket describes the problem pretty well.

Truncate  + no word break on very small screen: 

<img width="183" alt="image"
src="https://github.com/coveo/ui-kit/assets/1591893/3fae40a9-8170-4ef8-ab2a-c0b7e113c1c1">




https://coveord.atlassian.net/browse/KIT-3232

packages/atomic/src/components/commerce/product-template-components/atomic-product-price/atomic-product-price.tsx

@@ -35,9 +35,9 @@ export class AtomicProductPrice
       this.product?.ec_promo_price < this.product?.ec_price;
 
     return (
-      <div>
+      <div class="flex flex-wrap">
         <atomic-product-numeric-field-value
-          class={`mx-1 ${hasPromotionalPrice && 'text-error'}`}
+          class={`truncate break-keep mx-1 ${hasPromotionalPrice && 'text-error'}`}
           field={hasPromotionalPrice ? 'ec_promo_price' : 'ec_price'}
         >
           <atomic-format-currency
@@ -46,7 +46,7 @@ export class AtomicProductPrice
         </atomic-product-numeric-field-value>
         {hasPromotionalPrice && (
           <atomic-product-numeric-field-value
-            class="mx-1 text-xl line-through"
+            class="truncate break-keep mx-1 text-xl line-through"
             field="ec_price"
           >
             <atomic-format-currency