migrate auth v2 code

frontend/src/lib/components/Card.svelte

@@ -10,7 +10,8 @@
 
 <div
 	class="card"
-	style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
+	data-cols={cols}
+	style="--card-cols: {cols}; {accent ? `--card-accent: ${accent}` : ''}"
 	class:has-accent={!!accent}
 	class:scroll-x={scrollX}
 >
@@ -26,10 +27,14 @@
 
 <style>
 	.card {
+		grid-column: span var(--card-cols, 1);
+		/* Container so card contents can react to how wide the card actually is */
+		container-type: inline-size;
 		background: #fff;
 		border: 1px solid #e5e7eb;
 		border-radius: 10px;
 		overflow: hidden;
+		min-width: 0;
 	}
 	.card.scroll-x {
 		overflow: visible;
@@ -37,6 +42,21 @@
 	.card.has-accent {
 		border-top: 3px solid var(--card-accent, #6366f1);
 	}
+	/* Tablet (2-col grid): anything spanning 3+ collapses to a full row (span 2) */
+	@media (min-width: 640px) and (max-width: 1023px) {
+		.card[data-cols='3'],
+		.card[data-cols='4'],
+		.card[data-cols='5'],
+		.card[data-cols='6'] {
+			grid-column: span 2;
+		}
+	}
+	/* Mobile (1-col grid): every card is a full row */
+	@media (max-width: 639px) {
+		.card {
+			grid-column: span 1;
+		}
+	}
 	.card-header {
 		padding: 0.75rem 1rem;
 		border-bottom: 1px solid #f3f4f6;
@@ -54,4 +74,4 @@
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
 	}
-</style>
+</style>

frontend/src/lib/components/CardGrid.svelte

@@ -2,7 +2,7 @@
 	let { cols = 3, children }: { cols?: number; children?: any } = $props();
 </script>
 
-<div class="card-grid" style="grid-template-columns:repeat({cols}, 1fr)">
+<div class="card-grid" style="--grid-cols: {cols}">
 	{@render children?.()}
 </div>
 
@@ -10,5 +10,18 @@
 	.card-grid {
 		display: grid;
 		gap: 1rem;
+		grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
 	}
-</style>
+	/* Tablet: settle to 2 columns */
+	@media (min-width: 640px) and (max-width: 1023px) {
+		.card-grid {
+			--grid-cols: 2;
+		}
+	}
+	/* Mobile: single column */
+	@media (max-width: 639px) {
+		.card-grid {
+			--grid-cols: 1;
+		}
+	}
+</style>