sandrodach/MindSift
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(tasks): two-column task detail on the desktop (content left, settings right); v0.34.0
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 1m36s
Details

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-01 12:11:40 +01:00
1 parent d2b45daf4a
commit 66b28e1998
5 files changed
+40 -15
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/features/triage/TaskDetailModal.tsx
+29 -10
View File
@@ -205,7 +205,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
return (
<div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
<div
className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] max-h-[92dvh] overflow-hidden"
className="w-full max-w-2xl lg:max-w-5xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] max-h-[92dvh] overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
{/* Top Header */}
@@ -323,9 +323,14 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
{/* Scrollable Body (all controls disabled for read-only shares) */}
{/* The scroll container is a div: a scrolling <fieldset> is unreliable in mobile browsers */}
<div className="flex-1 min-h-0 overflow-y-auto overscroll-contain [-webkit-overflow-scrolling:touch]">
<fieldset disabled={readOnly} className="p-4 space-y-4 min-w-0 border-0 m-0">
{/* Desktop (lg): two columns, wide left (title, subtasks, notes), narrow right (all settings).
Phones and tablets keep the single column in the same order as before. */}
<fieldset
disabled={readOnly}
className="p-4 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-[minmax(0,1fr)_18rem] lg:grid-rows-[auto_auto_1fr] lg:gap-x-6 lg:gap-y-4 min-w-0 border-0 m-0"
>
{/* Task Title */}
<div>
<div className="lg:col-start-1 lg:row-start-1">
{isEditingTitle ? (
<div className="space-y-2">
<textarea
@@ -388,8 +393,10 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
)}
</div>
{/* Settings: right column on the desktop */}
<div className="space-y-4 lg:col-start-2 lg:row-start-1 lg:row-span-3 lg:border-l lg:border-border lg:pl-5">
{/* Kanban Status Buttons */}
<div className="space-y-1.5 pt-1 border-t border-border">
<div className="space-y-1.5 pt-1 border-t border-border lg:border-t-0 lg:pt-0">
<label className="block text-xs font-semibold text-main">
Zustand / Kanban-Status:
</label>
@@ -424,7 +431,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
<label className="block text-xs font-semibold text-main">
Priorität:
</label>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-1.5">
<div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-2 gap-1.5">
<button
type="button"
onClick={() => {
@@ -487,7 +494,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
</div>
{/* Due Date & List Selection Row */}
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1 border-t border-border">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3 pt-1 border-t border-border">
{/* Due Date */}
<div className="space-y-1.5">
<label className="block text-xs font-semibold text-main flex items-center gap-1">
@@ -704,8 +711,17 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
</div>
</div>
{/* Origin: in the right column on the desktop (phones show it in the footer) */}
{originDetails(task.origin, task.createdAt) && (
<div className="hidden lg:block space-y-1 pt-1 border-t border-border">
<label className="block text-xs font-semibold text-main">Herkunft:</label>
<p className="text-[11px] text-muted leading-snug">{originDetails(task.origin, task.createdAt)}</p>
</div>
)}
</div>
{/* Subtasks Checklist */}
<div className="space-y-2 pt-1 border-t border-border">
<div className="space-y-2 pt-1 border-t border-border lg:col-start-1 lg:row-start-2">
<div className="flex items-center justify-between">
<label className="block text-xs font-semibold text-main flex items-center gap-1.5">
<CheckSquare className="w-3.5 h-3.5 text-accent" />
@@ -792,7 +808,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
</div>
{/* Notes Section */}
<div className="space-y-2 pt-1 border-t border-border">
<div className="space-y-2 pt-1 border-t border-border lg:col-start-1 lg:row-start-3">
<div className="flex items-center justify-between">
<label className="block text-xs font-semibold text-main flex items-center gap-1.5">
<FileText className="w-3.5 h-3.5 text-accent" />
@@ -822,7 +838,7 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
autoFocus
ref={growNotes}
onInput={(e) => growNotes(e.currentTarget)}
className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-none min-h-[100px] overflow-hidden"
className="w-full input-field p-2.5 text-xs font-mono leading-relaxed resize-none min-h-[100px] lg:min-h-[260px] overflow-hidden"
/>
<div className="flex justify-end gap-1.5">
<button
@@ -880,7 +896,10 @@ const TaskDetailModalContent: React.FC<TaskDetailModalProps & { task: Thought }>
{/* Modal Footer */}
<div className="flex items-center justify-between px-4 py-2.5 border-t border-border bg-panel">
<div className="text-[11px] text-faint min-w-0 pr-3">
{originDetails(task.origin, task.createdAt) || `Erstellt: ${new Date(task.createdAt).toLocaleDateString('de-DE')}`}
<span className="lg:hidden">
{originDetails(task.origin, task.createdAt) || `Erstellt: ${new Date(task.createdAt).toLocaleDateString('de-DE')}`}
</span>
<span className="hidden lg:inline">Erstellt: {new Date(task.createdAt).toLocaleDateString('de-DE')}</span>
</div>
<button
type="button"