fix(SW-741): UI fixes on contentpages and some components

components/Blocks/TextCols/index.tsx

@@ -14,13 +14,11 @@ export default function TextCols({ text_cols }: TextColProps) {
         return (
           <section key={col.title} className={styles.column}>
             <Subtitle>{col.title}</Subtitle>
-            <div className={styles.text}>
-              <JsonToHtml
-                nodes={col.text.json.children}
-                embeds={col.text.embedded_itemsConnection.edges}
-                renderOptions={renderOptions}
-              />
-            </div>
+            <JsonToHtml
+              nodes={col.text.json.children}
+              embeds={col.text.embedded_itemsConnection.edges}
+              renderOptions={renderOptions}
+            />
           </section>
         )
       })}

components/Blocks/TextCols/renderOptions.tsx

@@ -5,7 +5,6 @@ import styles from "./textcols.module.css"
 import type { EmbedByUid } from "@/types/transitionTypes/jsontohtml"
 import { RTEItemTypeEnum, RTETypeEnum } from "@/types/transitionTypes/rte/enums"
 import type {
-  RTEDefaultNode,
   RTENext,
   RTENode,
   RTERegularNode,
@@ -13,18 +12,6 @@ import type {
 import type { RenderOptions } from "@/types/transitionTypes/rte/option"
 
 export const renderOptions: RenderOptions = {
-  [RTETypeEnum.p]: (
-    node: RTEDefaultNode,
-    embeds: EmbedByUid,
-    next: RTENext,
-    fullRenderOptions: RenderOptions
-  ) => {
-    return (
-      <p key={node.uid} className={styles.p}>
-        {next(node.children, embeds, fullRenderOptions)}
-      </p>
-    )
-  },
   [RTETypeEnum.a]: (
     node: RTERegularNode,
     embeds: EmbedByUid,

components/Blocks/TextCols/textcols.module.css

@@ -1,39 +1,18 @@
 .columns {
-  display: flex;
-  flex-direction: column;
+  display: grid;
   gap: var(--Spacing-x3);
 }
 
 .column {
+  display: grid;
+  gap: var(--Spacing-x1);
+  align-content: start;
   padding-bottom: var(--Spacing-x2);
   border-bottom: 1px solid var(--Base-Border-Subtle);
-  gap: var(--Spacing-x1);
-  display: flex;
-  flex-direction: column;
-}
-
-.p {
-  color: var(--UI-Text-High-contrast);
-  line-height: var(--Spacing-x3);
-  margin: 0;
-}
-
-.a {
-  color: var(--Base-Text-High-contrast);
-}
-
-.text > section {
-  gap: 0;
 }
 
 @media (min-width: 768px) {
   .columns {
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .column {
-    flex: 0 0 calc(50% - var(--Spacing-x3));
-    max-width: calc(50% - var(--Spacing-x3));
+    grid-template-columns: repeat(2, 1fr);
   }
 }