Skip to content

Commit 8a742c4

Browse files
felixeversfelixevers
committed
fix task card
1 parent c5b34d4 commit 8a742c4

1 file changed

Lines changed: 57 additions & 55 deletions

File tree

‎web/components/tasks/TaskCardView.tsx‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -190,84 +190,86 @@ export const TaskCardView = ({ task, onToggleDone: _onToggleDone, onClick, showA
190190
}}
191191
>
192192
<div className="flex flex-col gap-3 w-full min-w-0">
193-
<div className="flex items-start gap-4 w-full min-w-0">
194-
<div onClick={(e) => e.stopPropagation()}>
195-
<Checkbox
196-
value={displayDone}
197-
onValueChange={handleToggleDone}
198-
className={clsx('rounded-full mt-0.5 shrink-0', PriorityUtils.toCheckboxColor(task?.priority as TaskPriority | null | undefined))}
199-
/>
200-
</div>
201-
<div className="flex-1 min-w-0">
202-
<div className="flex items-center justify-between gap-2 flex-wrap min-w-0 mb-2">
203-
<div className="flex items-center gap-2 min-w-0 flex-1">
204-
{(task as FlexibleTask).priority && (
193+
<div className="flex flex-col sm:flex-row sm:items-start gap-4 w-full min-w-0">
194+
<div className="flex items-start gap-4 w-full min-w-0 sm:flex-1 sm:min-w-0">
195+
<div onClick={(e) => e.stopPropagation()}>
196+
<Checkbox
197+
value={displayDone}
198+
onValueChange={handleToggleDone}
199+
className={clsx('rounded-full mt-0.5 shrink-0', PriorityUtils.toCheckboxColor(task?.priority as TaskPriority | null | undefined))}
200+
/>
201+
</div>
202+
<div className="flex-1 min-w-0">
203+
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2 sm:flex-wrap min-w-0 mb-2">
204+
<div className="flex items-center gap-2 min-w-0 w-full sm:flex-1 sm:w-auto">
205+
{(task as FlexibleTask).priority && (
206+
<div
207+
className={clsx(
208+
'w-2 h-2 rounded-full shrink-0',
209+
PriorityUtils.toBackgroundColor(task?.priority as TaskPriority | null | undefined)
210+
)}
211+
/>
212+
)}
205213
<div
206214
className={clsx(
207-
'w-2 h-2 rounded-full shrink-0',
208-
PriorityUtils.toBackgroundColor(task?.priority as TaskPriority | null | undefined)
215+
'font-semibold text-lg min-w-0 flex-1 whitespace-normal break-words',
216+
{ 'line-through text-description': task.done }
209217
)}
210-
/>
211-
)}
212-
<div
213-
className={clsx(
214-
'font-semibold text-lg min-w-0 flex-1 whitespace-normal break-words',
215-
{ 'line-through text-description': task.done }
216-
)}
217-
>
218-
{taskName}
218+
>
219+
{taskName}
220+
</div>
219221
</div>
222+
{task.assigneeTeam && (
223+
<div className="flex items-center gap-1.5 text-base text-description min-w-0 w-full sm:w-auto sm:shrink-0 sm:justify-end">
224+
<Users className="size-5 text-description shrink-0" />
225+
<span className="min-w-0 break-words sm:truncate sm:max-w-40">{task.assigneeTeam.title}</span>
226+
</div>
227+
)}
228+
{!task.assigneeTeam && task.assignee && (
229+
<button
230+
onClick={(e) => {
231+
e.stopPropagation()
232+
setSelectedUserId(task.assignee!.id)
233+
}}
234+
className="flex items-center gap-1.5 text-base text-description min-w-0 w-full sm:w-auto sm:shrink-0 sm:justify-end hover:opacity-75 transition-opacity text-left"
235+
>
236+
<AvatarStatusComponent
237+
size="sm"
238+
isOnline={task.assignee?.isOnline ?? null}
239+
image={assigneeImage}
240+
/>
241+
<span className="min-w-0 break-words sm:truncate sm:max-w-[150px]">{task.assignee.name}</span>
242+
</button>
243+
)}
220244
</div>
221-
{task.assigneeTeam && (
222-
<div className="flex items-center gap-1.5 text-base text-description shrink-0 min-w-0">
223-
<Users className="size-5 text-description" />
224-
<span className="truncate max-w-40">{task.assigneeTeam.title}</span>
225-
</div>
226-
)}
227-
{!task.assigneeTeam && task.assignee && (
228-
<button
229-
onClick={(e) => {
230-
e.stopPropagation()
231-
setSelectedUserId(task.assignee!.id)
232-
}}
233-
className="flex items-center gap-1.5 text-base text-description shrink-0 min-w-0 hover:opacity-75 transition-opacity"
234-
>
235-
<AvatarStatusComponent
236-
size="sm"
237-
isOnline={task.assignee?.isOnline ?? null}
238-
image={assigneeImage}
239-
/>
240-
<span className="truncate max-w-[150px]">{task.assignee.name}</span>
241-
</button>
245+
{descriptionPreview && (
246+
<ExpandableTextBlock className="text-base text-description">
247+
{descriptionPreview}
248+
</ExpandableTextBlock>
242249
)}
243250
</div>
244-
{descriptionPreview && (
245-
<ExpandableTextBlock className="text-base text-description">
246-
{descriptionPreview}
247-
</ExpandableTextBlock>
248-
)}
249251
</div>
250-
<div className="shrink-0 flex flex-col items-end gap-2 text-sm text-description pt-0.5 max-w-[min(100%,11rem)]">
251-
<div className="flex flex-wrap items-center justify-end gap-3">
252+
<div className="shrink-0 flex flex-col gap-2 text-sm text-description pt-0.5 w-full pl-14 sm:pl-0 sm:items-end sm:w-auto sm:max-w-[min(100%,11rem)]">
253+
<div className="flex flex-col gap-2 items-stretch sm:flex-row sm:flex-wrap sm:items-center sm:justify-end gap-x-3 gap-y-2">
252254
{(task as FlexibleTask).estimatedTime && (
253-
<div className="flex items-center gap-1">
255+
<div className="flex items-center gap-1 min-w-0">
254256
<Clock className="size-4 shrink-0" />
255-
<span>
257+
<span className="min-w-0 break-words">
256258
{(task as FlexibleTask).estimatedTime! < 60
257259
? `${(task as FlexibleTask).estimatedTime}m`
258260
: `${Math.floor((task as FlexibleTask).estimatedTime! / 60)}h ${(task as FlexibleTask).estimatedTime! % 60}m`}
259261
</span>
260262
</div>
261263
)}
262264
{dueDate && (
263-
<div className={clsx('flex items-center gap-2', dueDateColorClass)}>
265+
<div className={clsx('flex items-center gap-2 min-w-0', dueDateColorClass)}>
264266
<Clock className="size-4 shrink-0" />
265267
<DateDisplay date={dueDate} mode="absolute" showTime={true} />
266268
</div>
267269
)}
268270
</div>
269271
{expectedFinishDate && (
270-
<div className="flex items-center gap-2 text-xs">
272+
<div className="flex items-center gap-2 text-xs min-w-0">
271273
<Flag className="size-4 shrink-0" />
272274
<DateDisplay date={expectedFinishDate} mode="absolute" showTime={true} />
273275
</div>

0 commit comments

Comments
 (0)