update member views

frontend/src/lib/components/Card.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
-	let { cols = 1, title, accent, children }: { cols?: 1 | 2 | 3; title?: string; accent?: string; children?: any } = $props();
+	let {
+		cols = 1,
+		title,
+		accent,
+		children
+	}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; children?: any } = $props();
 </script>
 
-<div class="card" style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}" class:has-accent={!!accent}>
+<div
+	class="card"
+	style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
+	class:has-accent={!!accent}
+>
 	{#if title}
 		<div class="card-header">
 			<span class="card-title">{title}</span>
@@ -20,12 +29,20 @@
 		border-radius: 10px;
 		overflow: hidden;
 	}
-	.card.has-accent { border-top: 3px solid var(--card-accent, #6366f1); }
+	.card.has-accent {
+		border-top: 3px solid var(--card-accent, #6366f1);
+	}
 	.card-header {
 		padding: 0.75rem 1rem;
 		border-bottom: 1px solid #f3f4f6;
 		background: #fafafa;
 	}
-	.card-title { font-weight: 600; font-size: 0.9rem; color: #374151; }
+	.card-title {
-	.card-body { padding: 1rem; }
+		font-weight: 600;
+		font-size: 0.9rem;
+		color: #374151;
+	}
+	.card-body {
+		padding: 1rem;
+	}
 </style>

frontend/src/lib/components/CardGrid.svelte

@@ -1,21 +1,14 @@
 <script lang="ts">
-	let { children }: { children?: any } = $props();
+	let { cols = 3, children }: { cols?: number; children?: any } = $props();
 </script>
 
-<div class="card-grid">
+<div class="card-grid" style="grid-template-columns:repeat({cols}, 1fr)">
 	{@render children?.()}
 </div>
 
 <style>
 	.card-grid {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
 		gap: 1rem;
 	}
-	@media (max-width: 900px) {
-		.card-grid { grid-template-columns: repeat(2, 1fr); }
-	}
-	@media (max-width: 600px) {
-		.card-grid { grid-template-columns: 1fr; }
-	}
 </style>