From bd58b3715623e861514b000dbb89804511c76d00 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Mon, 2 Nov 2026 10:55:02 +0100
Subject: [PATCH] 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>
---
 frontend/src/features/triage/TaskDetailModal.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/features/triage/TaskDetailModal.tsx b/frontend/src/features/triage/TaskDetailModal.tsx
index 45d838f..1cded09 100644
--- a/frontend/src/features/triage/TaskDetailModal.tsx
+++ b/frontend/src/features/triage/TaskDetailModal.tsx
@@ -236,7 +236,8 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
             >
               <Check className="w-3.5 h-3.5 stroke-[3]" />
             </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'}
             </span>
             {readOnly && (
@@ -245,7 +246,10 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
                 <span>Nur Lesen</span>
               </span>
             )}
-            <OriginBadge origin={task.origin} createdAt={task.createdAt} />
+            {/* 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} />
+            </span>
           </div>
 
           <div className="flex items-center gap-1.5">
@@ -254,7 +258,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
               onClick={handleToggleWatch}
               disabled={watchBusy}
               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' : ''
               }`}
             >