From 5bf6bdf7f07b8d5f0239a2ad8fd8f9ab6281ecf7 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Mon, 9 Sep 2024 15:27:59 +1000
Subject: [PATCH] Fix some display issue with long description

---
 .../product_preview.turbo_stream.haml         |  5 ++---
 .../css/admin_v3/pages/product_preview.scss   | 20 +++++++++++++++++++
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/views/admin/products_v3/product_preview.turbo_stream.haml b/app/views/admin/products_v3/product_preview.turbo_stream.haml
index ded87d134f..7ea9ce456c 100644
--- a/app/views/admin/products_v3/product_preview.turbo_stream.haml
+++ b/app/views/admin/products_v3/product_preview.turbo_stream.haml
@@ -106,9 +106,8 @@
 
 
               - if @product.description
-                .product-description
-                  - # TODO description not wrapped properly
-                  %p.text-small{ 'data-controller': "add-blank-to-link" }
+                .product-description{ 'data-controller': "add-blank-to-link" }
+                  %p.text-small
                     - # description is sanitized in Spree::Product#description method
                     = @product.description.html_safe
 
diff --git a/app/webpacker/css/admin_v3/pages/product_preview.scss b/app/webpacker/css/admin_v3/pages/product_preview.scss
index 90fa84c80d..fdf47f9095 100644
--- a/app/webpacker/css/admin_v3/pages/product_preview.scss
+++ b/app/webpacker/css/admin_v3/pages/product_preview.scss
@@ -121,6 +121,15 @@
   }
 
   // from foundation-sites/scss/foundations/components/_grid.scss
+  @media only screen and (min-width: 64.0625em) {
+    .column, .columns {
+      position: relative;
+      padding-left: 0.9375rem;
+      padding-right: 0.9375rem;
+      float: left;
+    }
+  }
+
   .column + .column:last-child,
   .column + .columns:last-child,
   .columns + .column:last-child,
@@ -144,6 +153,12 @@
     }
   }
 
+  @media only screen and (min-width: 64.0625em) {
+    .large-6 {
+      width: 50%;
+    }
+  }
+
   // from foundation-sites/scss/foundations/components/_global.scss
   img {
     display: inline-block;
@@ -187,9 +202,14 @@
   .tooltip {
     @include joyride-content;
     width: $joyride-width;
+    text-transform: none;
   }
 
   .arrow {
     background-color: $dynamic-blue;
   }
+
+  .columns {
+    margin-left: 0;
+  }
 }