From 22349fb46fbf05cdf3382e71202d25f44ab6bc6c Mon Sep 17 00:00:00 2001
From: Chris <chrisvel@users.noreply.github.com>
Date: Sun, 22 Mar 2026 12:12:28 +0200
Subject: [PATCH] Fix visual overlap between subtasks icon and status dropdown
 (#958)

* Fix visual overlap between subtasks icon and status dropdown

Increased right padding from pr-44 to pr-48 in TaskHeader desktop view
to prevent the subtasks toggle button from overlapping with the expanded
status dropdown icon.

Fixes #957

* Improve fix for subtasks icon and status dropdown overlap

- Removed flex-1 from task name container to prevent unnecessary expansion
- Wrapped SubtasksToggleButton in flex-shrink-0 div to maintain its width
- Increased right padding from pr-48 to pr-56 for better spacing
- This prevents the subtasks icon from overlapping with the status dropdown

Fixes #957

* Fix subtasks icon placement to be adjacent to task name

Moved SubtasksToggleButton to be directly after the task name within
the same flex container, instead of in a separate container. This positions
the icon immediately next to the task name on the left, rather than being
pushed to the right where it overlaps with the status dropdown.

Fixes #957
---
 frontend/components/Task/TaskHeader.tsx | 26 ++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/frontend/components/Task/TaskHeader.tsx b/frontend/components/Task/TaskHeader.tsx
index bd425ce..039cd11 100644
--- a/frontend/components/Task/TaskHeader.tsx
+++ b/frontend/components/Task/TaskHeader.tsx
@@ -183,7 +183,7 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
             {/* Full view (md and larger) */}
             <div className="hidden md:flex flex-col md:flex-row md:items-center md:relative">
                 <div
-                    className={`flex items-center space-x-3 mb-2 md:mb-0 flex-1 min-w-0 ${!isUpcomingView ? 'pr-44' : ''}`}
+                    className={`flex items-center space-x-3 mb-2 md:mb-0 flex-1 min-w-0 ${!isUpcomingView ? 'pr-56' : ''}`}
                 >
                     <div className="hidden">
                         <TaskPriorityIcon
@@ -293,19 +293,19 @@ const TaskHeader: React.FC<TaskHeaderProps> = ({
                                 )}
                             </div>
                         ) : (
-                            <div className="flex items-center gap-1.5 min-w-0 flex-1">
-                                <div className="flex items-center gap-1.5 flex-1 min-w-0">
-                                    {task.habit_mode && (
-                                        <FireIcon
-                                            className="h-4 w-4 text-orange-500 flex-shrink-0"
-                                            title="Habit"
-                                        />
-                                    )}
-                                    <span className="text-md font-medium text-gray-900 dark:text-gray-300 truncate">
-                                        {task.original_name || task.name}
-                                    </span>
+                            <div className="flex items-center gap-1.5 flex-1 min-w-0">
+                                {task.habit_mode && (
+                                    <FireIcon
+                                        className="h-4 w-4 text-orange-500 flex-shrink-0"
+                                        title="Habit"
+                                    />
+                                )}
+                                <span className="text-md font-medium text-gray-900 dark:text-gray-300 truncate">
+                                    {task.original_name || task.name}
+                                </span>
+                                <div className="flex-shrink-0">
+                                    <SubtasksToggleButton />
                                 </div>
-                                <SubtasksToggleButton />
                             </div>
                         )}
                         {/* Project, tags, due date, and recurrence in same row, with spacing when they exist */}