diff --git a/components/Blocks/ShortcutsList/index.tsx b/components/Blocks/ShortcutsList/index.tsx index 746f56492..12c718229 100644 --- a/components/Blocks/ShortcutsList/index.tsx +++ b/components/Blocks/ShortcutsList/index.tsx @@ -18,17 +18,20 @@ export default function ShortcutsList({ const leftColumn = shortcuts.slice(0, middleIndex) const rightColumn = shortcuts.slice(middleIndex) - const classNames = hasTwoColumns - ? { - section: styles.twoColumnSection, - leftColumn: styles.leftColumn, - rightColumn: styles.rightColumn, - } - : { - section: styles.oneColumnSection, - leftColumn: styles.leftColumnBottomBorder, - rightColumn: "", - } + const classNames = + hasTwoColumns && shortcuts.length > 1 + ? { + section: styles.twoColumnSection, + leftColumn: styles.leftColumn, + rightColumn: styles.rightColumn, + } + : { + section: styles.oneColumnSection, + leftColumn: + shortcuts.length === 1 + ? styles.leftColumnBorderBottomNone + : styles.leftColumnBorderBottom, + } return ( diff --git a/components/Blocks/ShortcutsList/shortcutsList.module.css b/components/Blocks/ShortcutsList/shortcutsList.module.css index 37daea30f..26dd448ac 100644 --- a/components/Blocks/ShortcutsList/shortcutsList.module.css +++ b/components/Blocks/ShortcutsList/shortcutsList.module.css @@ -7,10 +7,14 @@ } .leftColumn, -.leftColumnBottomBorder { +.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;