Multi-line checklist names in sidebar

Author: MikeRomaa

src/components/sidebar/ChecklistLeaf.tsx

@@ -6,6 +6,7 @@ import { Icon } from "../../icons";
 import { countItems } from "../../itemUtils";
 import { useDispatch } from "../../state";
 import { useConfirm } from "../common/confirmContext";
+import { EditableText } from "../common/EditableText";
 
 interface Props {
     checklist: Checklist;
@@ -50,7 +51,15 @@ export function ChecklistLeaf({ checklist, selected, inSection, onSelect }: Prop
             >
                 ⋮⋮
             </span>
-            <span className="leaf-name">{checklist.name}</span>
+            <span className="leaf-name" onPointerDown={(e) => e.stopPropagation()}>
+                <EditableText
+                    value={checklist.name}
+                    onCommit={(v) => dispatch({ type: "set-checklist-name", id: checklist.id, name: v })}
+                    multiline
+                    clampLines={3}
+                    commit="blur"
+                />
+            </span>
             <button
                 className="vH-del"
                 title="Delete checklist"

src/components/sidebar/Sidebar.css

@@ -195,10 +195,10 @@
 
 .tree-leaf {
     margin: 0 4px 0 18px;
-    padding: 0 8px 0 18px;
-    height: 24px;
+    padding: 1px 8px 1px 18px;
+    min-height: 24px;
     display: flex;
-    align-items: center;
+    align-items: start;
     border-left: 1px solid var(--bd-1);
     border-radius: 0 5px 5px 0;
     color: var(--fg-2);
@@ -217,6 +217,7 @@
 .tree-leaf .leaf-drag {
     width: 10px;
     margin-left: -8px;
+    margin-top: 3px;
     color: var(--fg-4);
     font-size: 12px;
     letter-spacing: -1px;
@@ -236,14 +237,13 @@
 }
 .tree-leaf .leaf-name {
     flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    min-width: 0;
 }
 .tree-leaf .leaf-meta {
     font-family: var(--font-mono);
     font-size: 11px;
     color: var(--fg-4);
+    margin-top: 4px;
 }
 .tree-leaf.selected {
     background: var(--accent-soft);