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",
}
: {}
}