add mobile view

packages/web/src/routes/progress/+page.svelte

@@ -28,6 +28,9 @@
 
 	{#if data.tasks.length > 0}
 		<div class="overflow-x-auto w-full">
+			{#if data.tasks.length > 0}
+				<!-- Desktop Table View -->
+				<div class="hidden md:block">
 					<table class="min-w-full">
 						<thead>
 							<tr class="border-b border-white">
@@ -48,7 +51,7 @@
 										<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
 											{#each task.tasksToTopics as topic}
 												<div
-											class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
+													class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
 													title="Click for more details about {topic.topic.name}"
 												>
 													{topic.topic.name}
@@ -56,7 +59,6 @@
 											{/each}
 										</a>
 									</td>
-
 									<td class="px-6 py-2 border-b min-w-[200px]">
 										<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
 											<div
@@ -76,6 +78,50 @@
 						</tbody>
 					</table>
 				</div>
+
+				<!-- Mobile Card View -->
+				<div class="md:hidden space-y-4">
+					{#each data.tasks as task}
+						<div class="bg-gray-800 rounded-lg p-2 w-full">
+							<a
+								href={`/progress/${task.id}`}
+								class="text-blue-500 hover:underline text-lg font-bold"
+							>
+								{task.name}
+							</a>
+							<div class="mt-1">
+								<div class="mb-1"></div>
+								<span class="font-medium">Topics:</span>
+								<div class="flex flex-wrap gap-1 mt-1">
+									{#each task.tasksToTopics as topic}
+										<div
+											class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
+											title="Click for more details about {topic.topic.name}"
+										>
+											{topic.topic.name}
+										</div>
+									{/each}
+								</div>
+							</div>
+							<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
+								<div
+									class="absolute h-full bg-green-500"
+									style="width: {(task.currentPoints / task.totalPoints) * 100}%"
+								/>
+								<span class="absolute inset-0 flex items-center justify-center text-xs">
+									{task.currentPoints} / {task.totalPoints} ({(
+										(task.currentPoints / task.totalPoints) *
+										100
+									).toFixed(1)}%)
+								</span>
+							</div>
+						</div>
+					{/each}
+				</div>
+			{:else}
+				<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
+			{/if}
+		</div>
 	{:else}
 		<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
 	{/if}