diff --git a/src/components/PostsGrid/PostsGrid.tsx b/src/components/PostsGrid/PostsGrid.tsx index f8f774b..2267a87 100644 --- a/src/components/PostsGrid/PostsGrid.tsx +++ b/src/components/PostsGrid/PostsGrid.tsx @@ -86,6 +86,7 @@ type Pattern = { cols: number maxWidth?: string size: PostCardProps['size'] + rowBorder?: boolean } type Breakpoint = { pattern: Pattern[] @@ -103,7 +104,7 @@ const createGridStyles = ({ postCardStyles: { [name: string]: SerializedStyles } - pattern: Pick[] + pattern: Pick[] breakpoint?: boolean horizontal?: boolean }) => { @@ -130,12 +131,27 @@ const createGridStyles = ({ > .row { display: grid; grid-template-columns: repeat(${cm}, 1fr); + overflow: hidden; & > div { ${pattern.map( (p, i) => css` ${selectors[i].map((s) => `&:nth-child(${s})`).join(', ')} { grid-column: span ${cm / p.cols}; + position: relative; + + ${p.rowBorder && + css` + &::before { + width: calc(100% + 16px); + height: 1px; + content: ' '; + top: 0; + left: 0px; + position: absolute; + background: rgb(var(--lsd-border-primary)); + } + `} .post-card { --post-card-size: ${p.size}; diff --git a/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx b/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx index 0713444..ad6d8bc 100644 --- a/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx +++ b/src/containers/PodcastShowsPreview/PodcastShowsPreview.tsx @@ -91,19 +91,30 @@ export const PodcastShowsPreview: React.FC = ({ cols: 2, size: 'xsmall', }, + { + cols: 2, + size: 'xsmall', + rowBorder: true, + }, ]} breakpoints={[ { breakpoint: 'xs', - pattern: [{ cols: 1, size: 'small' }], + pattern: [{ cols: 1, size: 'small', rowBorder: true }], }, { breakpoint: 'sm', - pattern: [{ cols: 2, size: 'small' }], + pattern: [ + { cols: 2, size: 'small' }, + { cols: 2, size: 'small', rowBorder: true }, + ], }, { breakpoint: 'md', - pattern: [{ cols: 2, size: 'small' }], + pattern: [ + { cols: 2, size: 'small' }, + { cols: 2, size: 'small', rowBorder: true }, + ], }, ]} />