From f78ff3fc3be86f411fc130b38b6a7700fb1f8880 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 13 Jan 2022 11:05:44 +0100
Subject: [PATCH] Improve display when label is long

(ie. longer than the available screen width)
---
 app/views/split_checkout/_details.html.haml     | 2 +-
 app/views/split_checkout/_payment.html.haml     | 2 +-
 app/webpacker/css/darkswarm/split-checkout.scss | 9 +++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/views/split_checkout/_details.html.haml b/app/views/split_checkout/_details.html.haml
index 4e0be37ac9..daec11522b 100644
--- a/app/views/split_checkout/_details.html.haml
+++ b/app/views/split_checkout/_details.html.haml
@@ -72,7 +72,7 @@
     - ship_method_description = nil
 
     - @shipping_methods.each do |shipping_method|
-      %div.checkout-input
+      %div.checkout-input.checkout-input-radio
         = fields_for shipping_method do |shipping_method_form|
           = shipping_method_form.radio_button :name, shipping_method.id,
             id: "shipping_method_#{shipping_method.id}",
diff --git a/app/views/split_checkout/_payment.html.haml b/app/views/split_checkout/_payment.html.haml
index bf02cf0e54..b85f1d468e 100644
--- a/app/views/split_checkout/_payment.html.haml
+++ b/app/views/split_checkout/_payment.html.haml
@@ -5,7 +5,7 @@
 
     - selected_payment_method = @order.payments&.with_state(:checkout)&.first&.payment_method_id
     - available_payment_methods.each do |payment_method| 
-      %div.checkout-input
+      %div.checkout-input.checkout-input-radio
         = f.radio_button :payment_method_id, payment_method.id,
           id: "payment_method_#{payment_method.id}",
           name: "order[payments_attributes][][payment_method_id]",
diff --git a/app/webpacker/css/darkswarm/split-checkout.scss b/app/webpacker/css/darkswarm/split-checkout.scss
index 5785a281ec..1ede2db116 100644
--- a/app/webpacker/css/darkswarm/split-checkout.scss
+++ b/app/webpacker/css/darkswarm/split-checkout.scss
@@ -131,6 +131,15 @@
       color: $teal-400;
       text-decoration: underline;
     }
+
+    &.checkout-input-radio {
+      display: flex;
+      align-items: center;
+
+      label {
+        margin-top: 0.3rem;
+      }
+    }
   }
 
   .checkout-input span.formError, div.error.card-errors {