Merge pull request #9139 from jibees/6139-handle-shipping-method-description-with-no-space

Split Checkout: Handle shipping/payment method description with no space

app/views/split_checkout/_summary.html.haml

@@ -46,8 +46,8 @@
         = t("split_checkout.step1.delivery_address.title")
       %span.summary-value
         = @order.shipping_method.name
-      %div
-      = @order.shipping_method.description
+      %div.summary-description
+        = @order.shipping_method.description
     
       %a.summary-edit{href: main_app.checkout_step_path(:details)}
         = t("split_checkout.step3.your_details.edit")
@@ -59,8 +59,8 @@
     %div.summary
       %span.summary-value
         = last_payment_method(@order)&.name
-        %p.text-small.text-skinny.pre-line
-          %em= last_payment_method(@order)&.description
+      %div.summary-description
+        = last_payment_method(@order)&.description
       %a.summary-edit{href: main_app.checkout_step_path(:payment)}
         = t("split_checkout.step3.payment_method.edit")
 

app/views/spree/shared/_order_details.html.haml

@@ -14,7 +14,7 @@
       .text-big
         = t :order_payment
         %strong=  last_payment_method(order)&.name
-      %p.text-small.text-skinny.pre-line
+      %p.text-small.text-skinny.pre-line.word-wrap
         %em= last_payment_method(order)&.description
 
     .order-summary.text-small

app/views/spree/shared/_shipment_delivery_details.html.haml

@@ -4,7 +4,7 @@
   .text-big
     = t :order_delivery_time
     %strong #{order.order_cycle.pickup_time_for(order.distributor)}
-  %p.text-small.text-skinny.pre-line
+  %p.text-small.text-skinny.pre-line.word-wrap
     %em= order.shipping_method.description&.html_safe || ""
 .order-summary.text-small
   %strong

app/webpacker/css/darkswarm/mixins.scss

@@ -211,3 +211,7 @@
     @media all and (max-width: $mobile_breakpoint)  { @content; }
   }
 }
+
+@mixin force-wrap {
+  word-wrap: break-word;
+}

app/webpacker/css/darkswarm/split-checkout.scss

@@ -139,7 +139,7 @@
 
     #distributor_address.panel {
       span {
-        white-space: pre-wrap;
+        @include force-wrap;
       }
     }
     
@@ -185,6 +185,10 @@
     }
   }
 
+  .paymentmethod-container .paymentmethod-description.panel {
+    @include force-wrap;
+  }
+
   .checkout-step3 {
     padding-left: 15px;
     padding-right: 15px;
@@ -279,8 +283,9 @@
     font-weight: bold;
   }
 
-  .summary-value {
-
+  .summary-description {
+    @include force-wrap;
+    color: $min-accessible-grey;
   }
 
   .summary-edit {