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

components/Blocks/ShortcutsList/index.tsx

@@ -15,36 +15,36 @@ export default function ShortcutsList({
   hasTwoColumns,
 }: ShortcutsListProps) {
   const middleIndex = Math.ceil(shortcuts.length / 2)
-  const leftColumn = shortcuts.slice(0, middleIndex)
-  const rightColumn = shortcuts.slice(middleIndex)
-
-  const classNames =
+  const columns =
     hasTwoColumns && shortcuts.length > 1
-      ? {
-          section: styles.twoColumnSection,
-          leftColumn: styles.leftColumn,
-          rightColumn: styles.rightColumn,
-        }
-      : {
-          section: styles.oneColumnSection,
-          leftColumn:
-            shortcuts.length === 1
-              ? styles.leftColumnBorderBottomNone
-              : styles.leftColumnBorderBottom,
-        }
+      ? [
+          {
+            id: "shortcuts-column-1",
+            column: shortcuts.slice(0, middleIndex),
+          },
+          {
+            id: "shortcuts-column-2",
+            column: shortcuts.slice(middleIndex),
+          },
+        ]
+      : [
+          {
+            id: "shortcuts-column",
+            column: shortcuts,
+          },
+        ]
 
   return (
     <SectionContainer>
       <SectionHeader preamble={subtitle} title={title} topTitle={firstItem} />
-      <section className={classNames.section}>
-        <ShortcutsListItems
-          shortcutsListItems={leftColumn}
-          className={classNames.leftColumn}
-        />
-        <ShortcutsListItems
-          shortcutsListItems={rightColumn}
-          className={classNames.rightColumn}
-        />
+      <section className={styles.section}>
+        {columns.map(({ id, column }) => (
+          <ShortcutsListItems
+            key={id}
+            shortcutsListItems={column}
+            className={styles.column}
+          />
+        ))}
       </section>
     </SectionContainer>
   )