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

components/Blocks/ShortcutsList/ShortcutsListItems/index.tsx

@@ -11,7 +11,7 @@ export default function ShortcutsListItems({
   className,
 }: ShortcutsListItemsProps) {
   return (
-    <ul className={className}>
+    <ul className={`${styles.list} ${className}`}>
       {shortcutsListItems.map((shortcut) => (
         <li key={shortcut.title} className={styles.listItem}>
           <Link

components/Blocks/ShortcutsList/ShortcutsListItems/shortcutsListItems.module.css

@@ -1,5 +1,8 @@
-.link {
-  background-color: var(--Base-Surface-Primary-light-Normal);
+.list {
+  height: fit-content;
+  border-radius: var(--Corner-radius-Medium);
+  overflow: hidden;
+  list-style: none;
 }
 
 .listItem {

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>
   )

components/Blocks/ShortcutsList/shortcutsList.module.css

@@ -1,33 +1,24 @@
-.oneColumnSection,
-.twoColumnSection {
-  display: grid;
-  border-radius: var(--Corner-radius-Medium);
-  border: 1px solid var(--Base-Border-Subtle);
-  overflow: hidden;
-}
-
-.leftColumn,
-.leftColumnBorderBottom {
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-}
-
-.leftColumnBorderBottomNone {
-  border-bottom: none;
-}
-
-@media screen and (min-width: 1367px) {
-  .twoColumnSection {
-    grid-template-columns: 1fr 1fr;
-    column-gap: var(--Spacing-x2);
-    border-radius: 0;
-    border: none;
-  }
-
-  .leftColumn,
-  .rightColumn {
-    height: fit-content;
-    border: 1px solid var(--Base-Border-Subtle);
+@media screen and (max-width: 1366px) {
+  .section {
     border-radius: var(--Corner-radius-Medium);
     overflow: hidden;
   }
+  .column {
+    border-radius: 0;
+  }
+
+  .column + .column {
+    border-top: 1px solid var(--Base-Border-Subtle);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .section {
+    border-radius: 0;
+  }
+  .section:has(.column:nth-child(2)) {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--Spacing-x2);
+  }
 }