feat: content page UI updates

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
             ? {