From 8c50d0581729ebae00d1b2a2afa27165c1325f93 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Tue, 9 Jul 2024 10:00:01 +0200
Subject: [PATCH] fix: make sure links are placed inline in list items and fix
 mobile responsivity

---
 components/JsonToHtml/jsontohtml.module.css | 35 ++++++++++++++-------
 components/JsonToHtml/renderOptions.tsx     |  1 -
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/components/JsonToHtml/jsontohtml.module.css b/components/JsonToHtml/jsontohtml.module.css
index 16bbfac2e..7fa45e803 100644
--- a/components/JsonToHtml/jsontohtml.module.css
+++ b/components/JsonToHtml/jsontohtml.module.css
@@ -14,11 +14,6 @@
   gap: var(--Spacing-x1);
 }
 
-.ol:has(li:nth-last-child(n + 5)),
-.ul:has(li:nth-last-child(n + 5)) {
-  grid-template-columns: 1fr 1fr;
-}
-
 .ol > li::marker {
   color: var(--Primary-Light-On-Surface-Accent);
 }
@@ -28,29 +23,35 @@
   list-style: none;
 }
 
-.li:has(.heart),
+/* .li:has(.heart),
 .li:has(.check) {
   display: flex;
-}
+} */
 
-.li:not(:has(.heart), :has(.check)) {
-  margin-left: var(--Spacing-x2);
+.li {
+  margin-left: var(--Spacing-x3);
 }
 
 .li:has(.heart):before {
   content: url("/_static/icons/heart.svg");
   position: relative;
-  margin-right: var(--Spacing-x1);
   height: 8px;
   top: 3px;
+  margin-right: var(--Spacing-x1);
+  margin-left: calc(var(--Spacing-x3) * -1);
 }
 
 .li:has(.check)::before {
   content: url("/_static/icons/check-ring.svg");
   position: relative;
-  margin-right: var(--Spacing-x1);
   height: 8px;
   top: 3px;
+  margin-right: var(--Spacing-x1);
+  margin-left: calc(var(--Spacing-x3) * -1);
+}
+
+.li::marker {
+  margin-left: calc(var(--Spacing-x1) * -1);
 }
 
 .container {
@@ -58,3 +59,15 @@
   gap: var(--Spacing-x3);
   max-width: 1197px;
 }
+
+.li > p {
+  display: inline;
+}
+
+@media screen and (min-width: 768px) {
+  .ol:has(li:nth-last-child(n + 5)),
+  .ul:has(li:nth-last-child(n + 5)) {
+    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
+  }
+}
diff --git a/components/JsonToHtml/renderOptions.tsx b/components/JsonToHtml/renderOptions.tsx
index b3d0cef9a..2757fffef 100644
--- a/components/JsonToHtml/renderOptions.tsx
+++ b/components/JsonToHtml/renderOptions.tsx
@@ -499,7 +499,6 @@ export const renderOptions: RenderOptions = {
           numberOfRows
             ? {
                 gridTemplateRows: `repeat(${numberOfRows}, auto)`,
-                gridAutoFlow: "column",
               }
             : {}
         }