community: team grid length is hard-coded

[ConnorBaker]

Describe the glitch

There are effectively three grid widths you can force the list of teams on the community page to fit into depending on window size: one column (very narrow viewport), two columns, and three columns (standard desktop viewport size).

Unfortunately, it seems the grid has a maximum length. Similar to the behavior noticed in #939, issues can arise when the number of entries exceeds the cap.

The grid is defined in community.less in two places (given the grid of width one is the same as having no grid), one for two-columns and three-columns:

nixos-homepage/site-styles/pages/community.less

Lines 391 to 487 in e7f123a

	#screen-sm-min({
	grid-template-columns: repeat(2, 1fr);
	text-align: left;
	& > a {
	justify-self: start;
	}
	& > svg {
	margin-left: 0;
	margin-right: 0;
	}
	& > svg:nth-of-type(1),
	& > svg:nth-of-type(2) {
	grid-row: 1;
	}
	& > svg:nth-of-type(3),
	& > svg:nth-of-type(4) {
	grid-row: 5;
	}
	& > svg:nth-of-type(5),
	& > svg:nth-of-type(6) {
	grid-row: 9;
	}
	& > svg:nth-of-type(7),
	& > svg:nth-of-type(8) {
	grid-row: 13;
	}
	& > svg:nth-of-type(9),
	& > svg:nth-of-type(10) {
	grid-row: 17;
	}
	& > h3:nth-of-type(1),
	& > h3:nth-of-type(2) {
	grid-row: 2;
	}
	& > h3:nth-of-type(3),
	& > h3:nth-of-type(4) {
	grid-row: 6;
	}
	& > h3:nth-of-type(5),
	& > h3:nth-of-type(6) {
	grid-row: 10;
	}
	& > h3:nth-of-type(7),
	& > h3:nth-of-type(8) {
	grid-row: 14;
	}
	& > h3:nth-of-type(9),
	& > h3:nth-of-type(10) {
	grid-row: 18;
	}
	& > p:nth-of-type(1),
	& > p:nth-of-type(2) {
	grid-row: 3;
	}
	& > p:nth-of-type(3),
	& > p:nth-of-type(4) {
	grid-row: 7;
	}
	& > p:nth-of-type(5),
	& > p:nth-of-type(6) {
	grid-row: 11;
	}
	& > p:nth-of-type(7),
	& > p:nth-of-type(8) {
	grid-row: 15;
	}
	& > p:nth-of-type(9),
	& > p:nth-of-type(10) {
	grid-row: 19;
	}
	& > a:nth-of-type(1),
	& > a:nth-of-type(2) {
	grid-row: 4;
	}
	& > a:nth-of-type(3),
	& > a:nth-of-type(4) {
	grid-row: 8;
	}
	& > a:nth-of-type(5),
	& > a:nth-of-type(6) {
	grid-row: 12;
	}
	& > a:nth-of-type(7),
	& > a:nth-of-type(8) {
	grid-row: 16;
	}
	& > a:nth-of-type(9),
	& > a:nth-of-type(10) {
	grid-row: 20;
	}
	});

nixos-homepage/site-styles/pages/community.less

Lines 489 to 555 in e7f123a

	#screen-md-min({
	grid-template-columns: repeat(3, 1fr);
	& > svg:nth-of-type(1),
	& > svg:nth-of-type(2),
	& > svg:nth-of-type(3) {
	grid-row: 1;
	}
	& > svg:nth-of-type(4),
	& > svg:nth-of-type(5),
	& > svg:nth-of-type(6) {
	grid-row: 5;
	}
	& > svg:nth-of-type(7),
	& > svg:nth-of-type(8),
	& > svg:nth-of-type(9) {
	grid-row: 9;
	}
	& > h3:nth-of-type(1),
	& > h3:nth-of-type(2),
	& > h3:nth-of-type(3) {
	grid-row: 2;
	}
	& > h3:nth-of-type(4),
	& > h3:nth-of-type(5),
	& > h3:nth-of-type(6) {
	grid-row: 6;
	}
	& > h3:nth-of-type(7),
	& > h3:nth-of-type(8),
	& > h3:nth-of-type(9) {
	grid-row: 10;
	}
	& > p:nth-of-type(1),
	& > p:nth-of-type(2),
	& > p:nth-of-type(3) {
	grid-row: 3;
	}
	& > p:nth-of-type(4),
	& > p:nth-of-type(5),
	& > p:nth-of-type(6) {
	grid-row: 7;
	}
	& > p:nth-of-type(7),
	& > p:nth-of-type(8),
	& > p:nth-of-type(9) {
	grid-row: 11;
	}
	& > a:nth-of-type(1),
	& > a:nth-of-type(2),
	& > a:nth-of-type(3) {
	grid-row: 4;
	}
	& > a:nth-of-type(4),
	& > a:nth-of-type(5),
	& > a:nth-of-type(6) {
	grid-row: 8;
	}
	& > a:nth-of-type(7),
	& > a:nth-of-type(8),
	& > a:nth-of-type(9) {
	grid-row: 12;
	}
	});

Screenshots

I ran into this issue working on #1048.

Before adding the CUDA maintainer team:

After adding the CUDA maintainer team:

Additional context

This could be fixed by dynamically sizing the length of the grid. I don't know enough CSS (or about less) to do that, but I do bump the length of the grid in #1048 to support adding the CUDA maintainer team.