Skip to content

Keep project cards from splitting across columns - #775

Open
GuillermoBarreto wants to merge 2 commits into
firstcontributions:mainfrom
GuillermoBarreto:fix/card-break-inside-avoid
Open

GuillermoBarreto wants to merge 2 commits into
firstcontributions:mainfrom
GuillermoBarreto:fix/card-break-inside-avoid

Conversation

@GuillermoBarreto

Copy link
Copy Markdown

What

Moved break-inside: avoid from the .containerLayout rule in src/components/ProjectList.astro to the .Card-Container rule in src/components/ProjectCard.astro.

Why

The project list renders with CSS multi-column layout (columns: 3), but break-inside: avoid was set on the column container itself, where it has no effect on the cards. A tall card (especially one with its issue list expanded) could split across two columns, showing the top of a card at the bottom of one column and the rest at the top of the next. Setting break-inside: avoid on the card itself keeps each card whole within a single column.

No visual change for cards that already fit in one column.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant