marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix visual overlap between subtasks icon and status dropdown (#958)

Browse source 
* 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
This commit is contained in:
Chris 2026-03-22 12:12:28 +02:00 • committed by GitHub
parent 35aa94ae9d
commit 22349fb46f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/components/Task/TaskHeader.tsx
View file

@ -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 */}