Fix component hiding

[Robot8lover]

Contributor checklist

• [x] This pull request is on a separate branch and not the main branch

---

Description

Exchange instances of hidden md:block or md:hidden and similar CSS based hiding techniques for v-if statements using breakpoints. As mentioned in #864, this has the advantage of not rendering these components, which is better for performance and usually desirable unless the window is being resized. If accounting for resizing windows is preferred, though it is usually not the case, then v-show could be used instead. I tried to keep any display property classes unless it was obvious they could be removed (e.g. block on a div). It is possible I reversed some of the logic due to a forgotten exclamation mark, which is one of the downsides of what I did. It may be better to explicitly write greaterOrEqual or lesser to avoid such errors. There were also some conditionally assigned hiding classes, which involve two boolean checks.

Related issue

• 864

[github-actions[bot]]

Thank you for the pull request!

The activist team will do our best to address your contribution as soon as we can. The following is a checklist for maintainers to make sure this process goes as well as possible. Feel free to address the points below yourself in further commits if you realize that actions are needed :)

If you're not already a member of our public Matrix community, please consider joining! We'd suggest using Element as your Matrix client, and definitely join the General and Development rooms once you're in. Also consider joining our bi-weekly Saturday dev syncs. It'd be great to have you!

Maintainer checklist

• [x] The commit messages for the remote branch should be checked to make sure the contributor's email is set up correctly so that they receive credit for their contribution

  • The contributor's name and icon in remote commits should be the same as what appears in the PR
  • If there's a mismatch, the contributor needs to make sure that the email they use for GitHub matches what they have for git config user.email in their local activist repo

• [x] The TypeScript and formatting workflows within the PR checks do not indicate new errors in the files changed

• [x] The Playwright end to end and Zap penetration tests have been ran and are passing (if necessary)

• [x] The CHANGELOG has been updated with a description of the changes for the upcoming release and the corresponding issue (if necessary)

[netlify[bot]]

✅ Deploy Preview for activist-org ready!

Name	Link
🔨 Latest commit	1fee2a49127f82c3a9e95ea0429b88e5928672b6
🔍 Latest deploy log	https://app.netlify.com/sites/activist-org/deploys/66873a1f231168000831320d
😎 Deploy Preview	https://deploy-preview-890--activist-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[andrewtavis]

Really appreciate all the work here, @Robot8lover! We have the dev sync on Saturday that you'd be more then welcome to :) If you can't make the sync, also let me know and I'd be happy to set up a call and answer any questions you might have!

I'll try to bring all the PRs in over the coming days 😊