fix: make sure links are placed inline in list items and fix mobile responsivity

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)) {
+.li {
-  margin-left: var(--Spacing-x2);
+  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;
+  }
+}

components/JsonToHtml/renderOptions.tsx

@@ -499,7 +499,6 @@ export const renderOptions: RenderOptions = {
           numberOfRows
             ? {
                 gridTemplateRows: `repeat(${numberOfRows}, auto)`,
-                gridAutoFlow: "column",
               }
             : {}
         }