fix(tasks): keep the task detail header tidy on phones

The origin badge overlapped the watch button; on phones it is left out of
the header (the details stand at the bottom), as is the squeezed title.
The watch button gets the height of its neighbours.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 10:55:02 +01:00
1 parent e60e825b3c
commit bd58b37156
1 file changed
+6 -2
@@ -236,7 +236,8 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
> >
<Check className="w-3.5 h-3.5 stroke-[3]" /> <Check className="w-3.5 h-3.5 stroke-[3]" />
</button> </button>
<span className="text-xs font-semibold text-main truncate"> {/* Phones: squeezed to a single letter next to the buttons, so left out */}
<span className="hidden sm:inline text-xs font-semibold text-main truncate">
{readOnly ? 'Aufgabe ansehen' : task.isCompleted ? 'Erledigte Aufgabe' : 'Aufgabe bearbeiten'} {readOnly ? 'Aufgabe ansehen' : task.isCompleted ? 'Erledigte Aufgabe' : 'Aufgabe bearbeiten'}
</span> </span>
{readOnly && ( {readOnly && (
@@ -245,7 +246,10 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
<span>Nur Lesen</span> <span>Nur Lesen</span>
</span> </span>
)} )}
{/* Phones: no room next to the buttons; the details stand at the bottom anyway */}
<span className="hidden sm:inline-flex min-w-0">
<OriginBadge origin={task.origin} createdAt={task.createdAt} /> <OriginBadge origin={task.origin} createdAt={task.createdAt} />
</span>
</div> </div>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
@@ -254,7 +258,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
onClick={handleToggleWatch} onClick={handleToggleWatch}
disabled={watchBusy} disabled={watchBusy}
title={isWatching ? 'Nicht mehr beobachten' : 'Beobachten'} title={isWatching ? 'Nicht mehr beobachten' : 'Beobachten'}
className={`btn-action min-h-[44px] sm:min-h-0 h-11 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5 ${ className={`btn-action min-h-[38px] sm:min-h-0 h-9 sm:h-7 px-2.5 sm:px-2 text-xs flex items-center gap-1.5 ${
isWatching ? 'border-accent text-accent' : '' isWatching ? 'border-accent text-accent' : ''
}`} }`}
> >