Bah! TikTok to the rescue. I learned that you can set the type attribute on a button to button and this has the effect of making a button inside a form stop triggering the submit.
I was hacking the solution in javascript by adding a preventDefault. Boy do I feel dumb. I knew I was being dumb when I was doing it but for some reason never bothered to look it up.
Laziness or thinking I was done learning maybe, disappointing.
Also learned about the scroll snap css. gg I've ignored a lot in the world of front end.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
The first links of -- and accent color are already new and interesting. I knew that -- was used for variables but its the first time I'm reading the MDN properly. I can then use the var() function in css to get that value. I knew this implicitly but now I know it explicitly.
Accent color is also an attribute to style browser defaults like checkboxes. There is probably a value in going through the list of available properties.