Improve To-do List reordering with auto-scroll and persistent drag mode

[konewka17]

Describe the enhancement

I would like to suggest a few usability improvements to the To-do List view in the Home Assistant frontend.

1. Auto-scroll while dragging (minimal request)

When "Reorder items" is enabled and an item is dragged near the top or bottom of the page, the list should automatically scroll in that direction.

Currently, the list does not scroll during drag operations. This makes it impossible to move items across longer lists in one action. Especially when adding new items (which are appended to the bottom), moving them further up requires multiple short drag operations.

Auto-scrolling while dragging would significantly improve the experience without changing the overall UI structure.

2. Rethink “Reorder items” as a separate mode

At the moment, reordering requires explicitly enabling the "Reorder items" toggle.

Possible improvements:

• Persist the "Reorder items" state across page reloads unless the user disables it.
• Make reordering the default behavior and provide a setting to disable it.
• Remove the separate mode entirely and always show a drag handle per item.

This would reduce friction and make small adjustments to the list more natural and efficient.

3. Optional compact / narrow mode

To-do items are currently quite tall. When no comments are used, a significant amount of vertical space is unused.

An optional compact mode could:

• Reduce item height.
• Increase the number of visible items on screen.
• Make managing longer lists more efficient, especially on desktop.

Use cases

I use the To-do List to manage structured and frequently reordered tasks. When the list grows longer:

• Reordering items becomes cumbersome due to the lack of auto-scroll.
• Adding a new item at the bottom and moving it near the top requires multiple drag steps.
• The current item height limits how many tasks are visible at once.

These improvements would make the feature scale better for larger lists and improve day-to-day usability without fundamentally changing how it works.

Visual examples

Current UI:

• "Reorder items" must be enabled as a separate mode.
• Dragging an item near the top or bottom does not scroll the page.
• Items are relatively tall, even when no comments are used.

Proposed improvement:

• While dragging, the list auto-scrolls when reaching the viewport edges.
• A persistent drag handle is always visible (similar to Google Keep), or the reorder state remains enabled until explicitly disabled.
• Optional compact mode with reduced item height for denser lists.

Google Keep provides a good reference for frictionless reordering: drag handles are always visible and no dedicated “reorder mode” is required.

Anything else?

I believe these changes would make the To-do List feel more polished and efficient, especially for users managing longer or frequently reordered lists.