Interactive Comments Section using Vue 3

Vue made the reactivity super easy! I chose to use native CSS since it's been forever since not using a CSS framework and I'm glad I did because I (re)learned a ton (see code README).

I used the provided sketch document to try to match everything pixel perfect. In a real project I think I would prefer to use rem instead of px. If there's a plugin for sketch that translates pixels to rem I would love to check it out!

The comments data uses localStorage to persist between refreshes as suggested in the bonus. I decided to not do the date bonus option as I've done more date programming over the last 22 years and I wanted to have fun with this!

I found CSS order property and flex-basis was essential for positioning the comment buttons on desktop vs mobile. I'd be curious if anyone has a different approach, please share!

Firefox and safari have quite different native form element styles. Not using a framework with a reset or normalize like Tailwind or Bootstrap, I learned how difficult it is to create your own styles for form elements. What's your preferred method to reset form elements?

Keeping the textarea inside its flex container when manually resizing it was a little tricky until I discovered min-width: 0. Any other solutions?

Since the data structure and design does not allow more than one level of nested replies, the javascript and composition seemed overly complicated. I think I could have simplified everything by handling the functional logic at the parent component. Dumb components are usually my preference anyways for better flexibility. Would love to hear some other ideas for handling this non-recursive pattern.

Modal and background scrolling has always been a challenge. Generally I would reach for the popular npm package body-scroll-lock but I really liked the simplicity of trying it with body overflow:hidden. Please share your favorite method of modaling!