fix(ui): tab counters sit on the label like in the nav bar

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-10-28 23:21:20 +01:00
1 parent e509f685c1
commit b07a7acf42
3 files changed
+20 -12

No files matched your search

+12 -7
View File
@@ -1373,18 +1373,21 @@ export const TasksView: React.FC<TasksViewProps> = ({
<div className="w-full space-y-3">
{/* Top Header: Task Lists Tabs & View Mode Switcher (Desktop) */}
<div className="hidden sm:flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2 !mt-0">
{/* Task Lists selector tabs (counters sit on the top right corner, hence the extra gap) */}
<div className="flex flex-wrap items-center gap-x-3 gap-y-3 pt-2">
{/* Task Lists selector tabs */}
<div className="flex flex-wrap items-center gap-1">
<button
onClick={() => setSelectedListId('all')}
className={`relative h-8 px-3 text-xs font-medium border rounded-btn transition-colors ${
className={`h-8 px-3 text-xs font-medium border rounded-btn transition-colors ${
selectedListId === 'all'
? 'bg-panel border-accent text-main'
: 'bg-canvas border-border text-muted hover:text-main'
}`}
>
Alle Aufgaben
<CountBadge count={openTasksCount} position="corner" />
{/* Counter on the label, like in the nav bar */}
<span className={`relative inline-flex items-center ${openTasksCount ? 'pr-2' : ''}`}>
Alle Aufgaben
<CountBadge count={openTasksCount} position="corner" className="-top-1.5 -right-1" />
</span>
</button>
{safeTaskLists.map((tl) => (
@@ -1399,7 +1402,10 @@ export const TasksView: React.FC<TasksViewProps> = ({
className="h-full px-3 text-xs font-medium flex items-center gap-1.5 rounded-btn"
>
<span>{tl.icon}</span>
<span>{tl.title}</span>
<span className={`relative inline-flex items-center ${tl.tasksCount ? 'pr-2' : ''}`}>
{tl.title}
<CountBadge count={tl.tasksCount} position="corner" className="-top-1.5 -right-1" />
</span>
{(() => {
const isShared = (tl.shares && tl.shares.length > 0) || (tl.members && tl.members.length > 1);
@@ -1422,7 +1428,6 @@ export const TasksView: React.FC<TasksViewProps> = ({
);
})()}
</button>
<CountBadge count={tl.tasksCount} position="corner" />
{selectedListId === tl.id && (
<button
onClick={() => handleDeleteTaskList(tl.id)}