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;
+  }
+}

components/JsonToHtml/renderOptions.tsx

@@ -526,6 +526,15 @@ export const renderOptions: RenderOptions = {
   ) => {
     const props = extractPossibleAttributes(node.attrs)
 
+    if (props.className) {
+      if (hasAvailableULFormat(props.className)) {
+        // @ts-ignore:  We want to set css modules classNames even if it does not correspond
+        // to an existing class in the module style sheet. Due to our css modules plugin for
+        // typescript, we cannot do this without the ts-ignore
+        props.className = styles[props.className]
+      }
+    }
+
     // Set the number of rows dynamically to create even rows for each column. We want the li:s
     // to flow with the column, so therefore this is needed.
     let numberOfRows: number | undefined
@@ -538,7 +547,7 @@ export const renderOptions: RenderOptions = {
       <ul
         key={node.uid}
         {...props}
-        className={styles.ul}
+        className={`${styles.ul} ${props.className || ""}`}
         style={
           numberOfRows
             ? {