From b6d72fff952aa870423f2be728c7993d036743f1 Mon Sep 17 00:00:00 2001
From: Brian Fertig <brian.fertig@bio-techne.com>
Date: Tue, 29 Sep 2026 07:31:29 -0600
Subject: [PATCH] Refactor todo details toggle to inline icon button

- Replace the separate "Details" label and edit/preview button row with
  a compact icon button beside the title input
- Remove the "No details yet" placeholder to keep the row compact when
  details are not being edited
- Pin the title input to a fixed width so it no longer stretches to fill
  the row
---
 components/board/group-session-dialog.tsx | 32 +++++++++--------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/components/board/group-session-dialog.tsx b/components/board/group-session-dialog.tsx
index d43f01c..1e53f5c 100644
--- a/components/board/group-session-dialog.tsx
+++ b/components/board/group-session-dialog.tsx
@@ -503,8 +503,18 @@ function SessionTodoRow({
           autoFocus={draft.isNew && !draft.title}
           onChange={(e) => onChangeLocal({ title: e.target.value })}
           style={draft.completed ? undefined : { color: todoTextColor }}
-          className={cn("flex-1", draft.completed && "text-muted-foreground line-through")}
+          className={cn("w-40 shrink-0", draft.completed && "text-muted-foreground line-through")}
         />
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="shrink-0"
+          onClick={() => setEditingDetails((v) => !v)}
+          aria-label={`${editingDetails ? "Preview" : "Edit"} details for "${draft.title || "new to-do"}"`}
+        >
+          <Pencil className="size-4" />
+        </Button>
         {onCollapse && (
           <Button
             variant="ghost"
@@ -527,20 +537,6 @@ function SessionTodoRow({
         </Button>
       </div>
 
-      <div className="flex items-center justify-between">
-        <Label className="text-xs text-muted-foreground">Details</Label>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="h-6 gap-1 px-2 text-xs text-muted-foreground"
-          onClick={() => setEditingDetails((v) => !v)}
-        >
-          <Pencil className="size-3" />
-          {editingDetails ? "Preview" : "Edit"}
-        </Button>
-      </div>
-
       {editingDetails ? (
         <MDEditor
           value={draft.details}
@@ -552,11 +548,7 @@ function SessionTodoRow({
         <div className="max-h-40 overflow-y-auto rounded-md border p-2">
           <MarkdownPreview source={draft.details} />
         </div>
-      ) : (
-        <p className="rounded-md border border-dashed p-3 text-center text-xs text-muted-foreground">
-          No details yet.
-        </p>
-      )}
+      ) : null}
     </div>
   );
 }