From 6b712ee51648219f048c9bab764da3eb2b4e8bfe Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 22 Apr 2022 10:30:43 +0200
Subject: [PATCH 1/2] Move dl style rules into lists partial

Definition list (dl) is clearly not a typography topic
---
 .../spree/backend/shared/_typography.scss     | 32 -----------------
 .../bootstrap/mixins/_lists.scss              | 34 +++++++++++++++++++
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
index b6c48826d56..8f2d194c54a 100644
--- a/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
+++ b/backend/app/assets/stylesheets/spree/backend/shared/_typography.scss
@@ -57,38 +57,6 @@ ul.text_list {
   padding-left: 0;
 }
 
-dl {
-  width: 100%;
-  overflow: hidden;
-  margin: 5px 0;
-  color: lighten($body-color, 15);
-
-  dt, dd {
-    float: left;
-    line-height: 16px;
-    padding: 5px;
-  }
-
-  dt {
-    width: 40%;
-    font-weight: $font-weight-bold;
-    padding-left: 0;
-    clear: left;
-  }
-
-  dd {
-    width: 60%;
-    padding-right: 0;
-    margin-left: 0;
-  }
-}
-
-.dl-collapse {
-  dt, dd {
-    width: auto;
-  }
-}
-
 // Helpers
 .align-center  { text-align: center  }
 .align-right   { text-align: right   }
diff --git a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
index 25185626698..599434d9c06 100644
--- a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
+++ b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
@@ -5,3 +5,37 @@
   padding-left: 0;
   list-style: none;
 }
+
+dl {
+  width: 100%;
+  overflow: hidden;
+  margin: 5px 0;
+  color: lighten($body-color, 15);
+
+  dt,
+  dd {
+    float: left;
+    line-height: 16px;
+    padding: 5px;
+  }
+
+  dt {
+    width: 40%;
+    font-weight: $font-weight-bold;
+    padding-left: 0;
+    clear: left;
+  }
+
+  dd {
+    width: 60%;
+    padding-right: 0;
+    margin-left: 0;
+  }
+}
+
+.dl-collapse {
+  dt,
+  dd {
+    width: auto;
+  }
+}

From 6bff1c4d924432d448e9943591f1eb356b23ff50 Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Fri, 22 Apr 2022 10:41:30 +0200
Subject: [PATCH 2/2] Make more room for long values in DL

Using flex box to be more flexible (pun intended) with long keys in the order summary.
---
 .../solidus_admin/bootstrap/mixins/_lists.scss           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
index 599434d9c06..406af51b92b 100644
--- a/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
+++ b/backend/vendor/assets/stylesheets/solidus_admin/bootstrap/mixins/_lists.scss
@@ -7,6 +7,9 @@
 }
 
 dl {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   width: 100%;
   overflow: hidden;
   margin: 5px 0;
@@ -14,20 +17,18 @@ dl {
 
   dt,
   dd {
-    float: left;
+    min-width: 40%;
     line-height: 16px;
     padding: 5px;
   }
 
   dt {
-    width: 40%;
     font-weight: $font-weight-bold;
     padding-left: 0;
-    clear: left;
   }
 
   dd {
-    width: 60%;
+    text-align: right;
     padding-right: 0;
     margin-left: 0;
   }