fix(SW-813): More content page fixes

components/Blocks/Table/index.tsx

@@ -29,6 +29,7 @@ export default function TableBlock({ data }: TableBlockProps) {
     header: col.header,
     size: col.width,
   }))
+  const hasHeader = columns.some((col) => col.header)
 
   const table = useReactTable({
     columns: columnDefs,
@@ -49,9 +50,7 @@ export default function TableBlock({ data }: TableBlockProps) {
 
   return (
     <SectionContainer>
-      {heading ? (
+      {heading ? <SectionHeader preamble={preamble} title={heading} /> : null}
-        <SectionHeader preamble={data.preamble} title={heading} />
-      ) : null}
       <div className={styles.tableWrapper}>
         <ScrollWrapper>
           <Table
@@ -61,23 +60,26 @@ export default function TableBlock({ data }: TableBlockProps) {
             layout="fixed"
             borderRadius="none"
           >
-            <Table.THead>
+            {hasHeader ? (
-              {table.getHeaderGroups().map((headerGroup) => (
+              <Table.THead>
-                <Table.TR key={headerGroup.id}>
+                {table.getHeaderGroups().map((headerGroup) => (
-                  {headerGroup.headers.map((header) => (
+                  <Table.TR key={headerGroup.id}>
-                    <Table.TH
+                    {headerGroup.headers.map((header) => (
-                      key={header.id}
+                      <Table.TH
-                      width={`${header.column.columnDef.size}%`}
+                        key={header.id}
-                    >
+                        width={`${header.column.columnDef.size}%`}
-                      {flexRender(
+                      >
-                        header.column.columnDef.header,
+                        {flexRender(
-                        header.getContext()
+                          header.column.columnDef.header,
-                      )}
+                          header.getContext()
-                    </Table.TH>
+                        )}
-                  ))}
+                      </Table.TH>
-                </Table.TR>
+                    ))}
-              ))}
+                  </Table.TR>
-            </Table.THead>
+                ))}
+              </Table.THead>
+            ) : null}
+
             <Table.TBody>
               {table.getRowModel().rows.map((row) => (
                 <Table.TR key={row.id}>

components/ContentType/StaticPages/staticPage.module.css

@@ -33,6 +33,8 @@
 
 .contentContainer {
   padding: var(--Spacing-x4) var(--Spacing-x2) 0;
+  max-width: var(--max-width-content);
+  margin: 0 auto;
 }
 
 .content .contentContainer {
@@ -67,9 +69,7 @@
   }
 
   .contentContainer {
-    max-width: var(--max-width-content);
     padding: var(--Spacing-x4) 0 0;
-    margin: 0 auto;
   }
 
   .content .contentContainer {

components/DeprecatedJsonToHtml/renderOptions.tsx

@@ -65,7 +65,6 @@ export const renderOptions: RenderOptions = {
     next: RTENext,
     fullRenderOptions: RenderOptions
   ) => {
-    console.log({ RTE_A_NODE: node })
     if (node.attrs.url) {
       const props = extractPossibleAttributes(node.attrs)
       return (

components/Sidebar/sidebar.module.css

@@ -10,10 +10,6 @@
   padding-top: var(--Spacing-x4);
 }
 
-.content {
-  padding: var(--Spacing-x0) var(--Spacing-x2);
-}
-
 @media screen and (min-width: 1367px) {
   .aside {
     align-content: flex-start;

components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css

@@ -10,7 +10,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   cursor: pointer;
   color: var(--Base-Text-High-contrast);
   font-family: var(--typography-Body-Bold-fontFamily);
@@ -29,7 +29,7 @@
 }
 
 .accordionItem.card .summary {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   border-radius: var(--Corner-radius-Medium);
 }
 
@@ -38,7 +38,7 @@
 }
 
 .content {
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half) var(--Spacing-x1);
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2) var(--Spacing-x1);
   overflow: hidden;
   max-height: 0;
   transition: max-height 0.3s;
@@ -46,6 +46,7 @@
 
 .chevron {
   transition: transform 0.3s;
+  flex-shrink: 0;
 }
 details[open] .chevron {
   transform: rotate(180deg);

components/TempDesignSystem/Table/table.module.css

@@ -19,9 +19,7 @@
 
 .th {
   padding: var(--Spacing-x2);
-
   text-align: left;
-  text-wrap: nowrap;
 }
 
 .td {