Center each habit layout on its completion action

src/pages/Home.tsx

@@ -510,6 +510,7 @@ function SavedHabit({
   const [editing, setEditing] = useState<{ mode: ItemMode; color: string } | null>(null);
   const [addingTask, setAddingTask] = useState(false);
   const blocked = disabled || !habit.due;
+  const method = habit.requirements?.method ?? habit.method;
   return (
     <HabitHistory
       habit={habit}
@@ -538,6 +539,7 @@ function SavedHabit({
       tasks={
         habit.requirements?.method === "tasks" ? (
           <>
+            <ul className="ds-routine-items">
             {habit.requirements.tasks.map((config) => {
               const occurrence = habit.tasks.find((task) => task.taskId === config.id);
               return (
@@ -556,6 +558,7 @@ function SavedHabit({
                 />
               );
             })}
+            </ul>
             {addingTask && (
               <InlineTaskEditor
                 name=""
@@ -571,9 +574,6 @@ function SavedHabit({
               />
             )}
               <div className="ds-task-add-action">
-                {!habit.requirements.tasks.length && (
-                  <p className="ds-footnote">Add a task to start checking in.</p>
-                )}
                 <Button
                   variant="text"
                   aria-haspopup="dialog"
@@ -588,7 +588,7 @@ function SavedHabit({
         ) : undefined
       }
     >
-      {habit.method === "count" ? (
+      {method === "count" ? (
         <Counter
           key={date}
           label={habit.name ?? "habit count"}
@@ -597,8 +597,10 @@ function SavedHabit({
           disabled={blocked}
           onChange={(count) => void onUpdate(habit, { count })}
         />
-      ) : habit.method === "manual" ? (
+      ) : method === "manual" ? (
         <Checkbox
+          id={`habit-check-${habit.habitId}`}
+          hideLabel
           label={`${habit.name} done`}
           checked={habit.complete}
           disabled={blocked}
@@ -634,11 +636,11 @@ function SavedTask({
 }) {
   const [mode, setMode] = useState<ItemMode | null>(null);
   return (
-    <div className="ds-editable-task">
+    <li className="ds-editable-task">
       <div className="ds-editable-task-row">
         <Checkbox
           label={task.name}
-          description={`${scheduleLabel(schedule)}${scheduled ? "" : " · Not scheduled today"}`}
+          description={!scheduled ? "Not scheduled today" : schedule.type === "daily" ? undefined : scheduleLabel(schedule)}
           checked={task.done}
           disabled={blocked || !!mode}
           onChange={(event) => onCheck(event.target.checked)}
@@ -664,6 +666,6 @@ function SavedTask({
           onClose={() => setMode(null)}
         />
       )}
-    </div>
+    </li>
   );
 }