From 0f65635c8ef98db6d804e5e8f4526bca9d10e2c1 Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Sat, 12 Sep 2026 15:08:18 +0200
Subject: [PATCH] improve tasksCounter display

---
 app/components/Todo/TasksCounter.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/components/Todo/TasksCounter.vue b/app/components/Todo/TasksCounter.vue
index 2467968..dd0cece 100644
--- a/app/components/Todo/TasksCounter.vue
+++ b/app/components/Todo/TasksCounter.vue
@@ -3,12 +3,16 @@
 </script>
 
 <template>
-	<div class="flex gap-0.5 border rounded border-secondary pl-0.5 text-xs">
-		<span class="text-nowrap"> {{ done }} / {{ from }} </span>
-		<div
-			class="border-l rounded border-secondary flex items-center justify-center aspect-square bg-secondary"
-		>
-			<Icon name="material-symbols:check-rounded" size="14" />
-		</div>
+	<div class="flex border rounded border-secondary pl-0.5 text-xs overflow-clip ">
+	<div class="grid grid-cols-2 gap-2 bg-[linear-gradient(110deg,transparent_50%,var(--color-secondary)_50%)]">
+    	<div class="text-center"> {{ done }} </div>
+    	<div class="text-center"> {{ from }} </div>
+	</div>
+	<div class="bg-secondary w-1" />
+	<div
+		class="flex items-center justify-center aspect-square bg-secondary"
+	>
+		<Icon name="material-symbols:check-rounded" size="14" />
+	</div>
 	</div>
 </template>
-- 
2.51.2