style(SW-634): add logic to avoid double borders
This commit is contained in:
@@ -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 (
|
||||
<SectionContainer>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user