fix(todo): smoothly collapse rows on filter leave/enter

Switch the TransitionGroup animation from in-flow opacity+translate to
the grid-template-rows 1fr → 0fr pattern so a leaving row's height
shrinks during the transition. Avoids the post-animation snap that
happened when the DOM nodes were removed and the surrounding gap
suddenly closed.

src/views/TodoNotes.vue

@@ -388,12 +388,14 @@ const createTodoFile = async () => {
 
         <TransitionGroup name="todo" tag="ul" class="todo-list">
           <li v-for="entry in filteredEntries" :key="entry.index">
+            <div class="todo-li-inner">
               <todo-txt-item
                 :task="entry.line"
                 :can-edit="canPush"
                 @update="(t) => updateTask(entry.index, t)"
                 @delete="deleteTask(entry.index)"
               />
+            </div>
           </li>
         </TransitionGroup>
 
@@ -431,35 +433,35 @@ const createTodoFile = async () => {
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    position: relative;
 
     li {
       list-style: none;
+      // Use grid-template-rows 1fr → 0fr so the row's height (and therefore
+      // the surrounding gap) collapses smoothly during leave instead of
+      // snapping closed when the DOM node is removed.
+      display: grid;
+      grid-template-rows: 1fr;
     }
   }
 
+  .todo-li-inner {
+    overflow: hidden;
+    min-height: 0;
+  }
+
   .todo-enter-active,
   .todo-leave-active {
     transition:
       opacity 180ms ease,
-      transform 220ms ease;
+      transform 220ms ease,
-  }
+      grid-template-rows 220ms ease;
-
-  .todo-enter-from {
-    opacity: 0;
-    transform: translateX(-12px);
   }
 
+  .todo-enter-from,
   .todo-leave-to {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(-12px);
-  }
+    grid-template-rows: 0fr;
-
-  // Take the leaving item out of layout flow so the rest of the list
-  // slides up smoothly via .todo-move instead of jumping.
-  .todo-leave-active {
-    position: absolute;
-    width: 100%;
   }
 
   .todo-move {