Allow generators to be listed in two columns

Author: misode

src/app/components/generator/GeneratorCard.tsx

@@ -1,10 +1,10 @@
 import { useMemo } from 'preact/hooks'
 import type { ConfigGenerator } from '../../Config.js'
 import config from '../../Config.js'
-import { cleanUrl } from '../../Utils.js'
 import { useLocale } from '../../contexts/Locale.jsx'
 import type { VersionId } from '../../services/Schemas.js'
 import { checkVersion } from '../../services/Schemas.js'
+import { cleanUrl } from '../../Utils.js'
 import { Badge, Card, Icons, ToolCard } from '../index.js'
 
 const VERSION_SEP = ' • '
@@ -40,12 +40,12 @@ export function GeneratorCard({ id, minimal }: Props) {
 	}, [gen])
 
 	const versionText = useMemo(() => {
-		if (versions.length <= 5) {
+		if (versions.length <= 3) {
 			return versions.join(VERSION_SEP)
 		}
 		return versions[0] + VERSION_SEP
 			+ '...' + VERSION_SEP
-			+ versions.slice(-3).join(VERSION_SEP)
+			+ versions.slice(-2).join(VERSION_SEP)
 	}, [versions])
 
 	const tags = useMemo(() => {

src/app/components/generator/GeneratorList.tsx

@@ -45,7 +45,7 @@ export function GeneratorList({ predicate }: Props) {
 		</div>
 		{filteredGenerators.length === 0 ? <>
 			<span class="note">{locale('generators.no_results')}</span>
-		</> : <div class="card-column">
+		</> : <div class="card-grid">
 			{filteredGenerators.map(gen =>
 				<GeneratorCard id={gen.id} />
 			)}

src/styles/global.css

@@ -2291,6 +2291,7 @@ hr {
 
 .navigation + .card-column,
 .badges-list + .card-column,
+.navigation + .card-grid,
 .navigation + .badges-list {
 	margin-top: 8px;
 }
@@ -2681,6 +2682,18 @@ hr {
 	margin-bottom: 8px;
 }
 
+.card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 8px;
+}
+
+@media screen and (max-width: 980px) {
+	.card-grid {
+		grid-template-columns: 1fr;
+	}
+}
+
 .card {
 	display: block;
 	text-decoration: none;
@@ -2714,11 +2727,12 @@ hr {
 	color: var(--text-2);
 	fill: currentColor;
 	margin-left: 8px;
-	transition: margin 0.2s;
+	margin-right: 8px;
+	transition: transform 0.2s;
 }
 
 .card:hover .card-title svg {
-	margin-left: 14px;
+	transform: translateX(6px);
 }
 
 .card-overlay {