Footer responsiveness

[kentcdodds]

Summary

This PR addresses the responsiveness of the footer, ensuring it adapts correctly to different screen sizes. The footer now stacks vertically on small screens, wraps navigation links, and aligns the theme switch appropriately for mobile and desktop views.

Test Plan

1. Navigate to any page displaying the footer.
2. Resize the browser viewport to simulate mobile and desktop screen sizes.
3. Verify that the footer elements (logo, navigation links, theme switch) rearrange and align correctly:
   • On small screens, the footer should stack vertically.
   • Navigation links should wrap if necessary.
   • The theme switch should be aligned responsively.

Checklist

• Tests updated
• Docs updated

Screenshots

---

 

---

Note

Low Risk
Tailwind/CSS class changes limited to footer layout; no business logic, data, or security behavior changes.

Overview
Improves footer responsiveness in app/routes/_app+/_layout.tsx by switching the footer layout to stack vertically on small screens and switch to a horizontal layout at md.

Navigation links now wrap (sm:flex-wrap) instead of forcing a single row, and the ThemeSwitch is wrapped to align self-start on mobile and reset alignment on desktop.

^{Written by Cursor Bugbot for commit 567883e. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}