SCSS, Vanilla JS and HTML Drag and Drop API

I've focused on JavaScript and the HTML Drag and Drop API for this one, so some aspects of the CSS are not finalised get (e.g. dark mode). But I would appreciate any advice on the following:

What overall approach would you take to writing the JavaScript for this kind of challenge? I ended up kind of using localStorage as a place to manage the state of each todo, but honest the code is a bit of a mess and there are a lot of re-rendering calls.

I was wondering if an approach using a Class or Constructor might be better? Any advice on this would be welcome. I'm not at the stage with JS yet when I can see the best way to approach something (I think I am mostly there with CSS...) so I can end up with quite complex code.

KNOWN ISSUES:

1. The checkbox ticks disappear in Chrome on large viewports - no idea why yet! I'm only using media queries in one place and they don't affect this. [UPDATE: FIXED]
2. The Drag and Drop API isn't working well on Firefox - I will look into fixing this but if it's too much, honestly, I'm just going to leave it!
3. The filters are a mess on iOS. They work, but the style class doesn't seem to be applied, but is on desktop. [UPDATE: FIXED]
4. I am using beforebegin to insert the element being dragged, this means you can't move an item directly to the bottom of the list.

If you spot any other issues please let me know, but I'm thinking that I've gone on a wrong track here with the way I've approached things JavaScript-wise as there seem to be so many possible edge-cases!

Thanks in advance for any advice.

UPDATE: FIXED

• Layout on small viewports improved
• Ticks disappearing on large viewports
• Application of active filter class on small viewports

Calling time on this one!