feat: content page UI updates

components/JsonToHtml/jsontohtml.module.css

@@ -18,16 +18,12 @@
   color: var(--Primary-Light-On-Surface-Accent);
 }
 
-.li:has(.heart),
-.li:has(.check) {
-  list-style: none;
-}
-
 .li {
   margin-left: var(--Spacing-x3);
 }
 
-.li:has(.heart):before {
+.heart > .li::before,
+.li:has(.heart)::before {
   content: url("/_static/icons/heart.svg");
   position: relative;
   height: 8px;
@@ -36,6 +32,14 @@
   margin-left: calc(var(--Spacing-x3) * -1);
 }
 
+.heart > .li,
+.check > .li,
+.li:has(.check),
+.li:has(.heart) {
+  list-style: none;
+}
+
+.check > .li::before,
 .li:has(.check)::before {
   content: url("/_static/icons/check-ring.svg");
   position: relative;
@@ -59,6 +63,7 @@
   max-width: 100%;
   overflow-x: auto;
 }
+
 @media screen and (min-width: 768px) {
   .ol:has(li:nth-last-child(n + 5)),
   .ul:has(li:nth-last-child(n + 5)) {
@@ -66,3 +71,11 @@
     grid-auto-flow: column;
   }
 }
+
+@container sidebar (max-width: 390px) {
+  .ol,
+  .ul {
+    display: flex;
+    flex-direction: column;
+  }
+}