From f59ee96011512d6765e033e80c4dbde1e16a1bfb Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Tue, 3 Sep 2024 15:19:14 +1000
Subject: [PATCH] Copy foundation-sites css relevant to the modal

The frontend is based on fondation-sites to provide responsive design,
we can't just import in the backend. So opted for copying the part we
needed
---
 .../css/admin_v3/pages/product_preview.scss   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)

diff --git a/app/webpacker/css/admin_v3/pages/product_preview.scss b/app/webpacker/css/admin_v3/pages/product_preview.scss
index 07a0f617bc..319d733bb1 100644
--- a/app/webpacker/css/admin_v3/pages/product_preview.scss
+++ b/app/webpacker/css/admin_v3/pages/product_preview.scss
@@ -38,4 +38,63 @@
       }
     }
   }
+
+  // The frontend css is base on foundation-sites https://github.com/foundation/foundation-sites
+  // Below we copied the sections that are relevant to the product preview modal 
+
+  // from foundation-sites/scss/foundations/components/_types.scss
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: #222222;
+    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1.4;
+    margin-bottom: 0.5rem;
+    margin-top: 0.2rem;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.4;
+  }
+
+  h3 {
+    font-size: 1.6875rem;
+  }
+
+  em,
+  i {
+    font-style: italic;
+    line-height: inherit;
+  }
+
+  ul,
+  ol,
+  dl {
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.6;
+    list-style-position: outside;
+    margin-bottom: 1.25rem;
+  }
+
+  // from fondation-sites/scss/foundations/components/_grid.scss
+  .column + .column:last-child,
+  .column + .columns:last-child,
+  .columns + .column:last-child,
+  .columns + .columns:last-child {
+    float: right;
+  }
+
 }
+