fix: update footer nav layout

[alexdln]

🧭 Context

We have too many links in our footer and they all overlap and it all looks very crooked.

We discussed what the potential division into sections would be after launch, but for now I'm making a small edit to make it look correct.

📚 Description

Screenshots

Before:

After:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 2, 2026 3:46pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 2, 2026 3:46pm
npmx-lunaria	Ignored		Mar 2, 2026 3:46pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The AppFooter.vue component has been restructured from a single responsive row layout to a two-column design on large screens with explicit lg breakpoints. The left column now contains the tagline, a conditionally rendered BuildEnvironment component (excluded on the home route), footer links, and a keyboard-shortcuts modal trigger. The right column contains documentation and external links. Spacing has been adjusted for the tagline with additional bottom margin, and no changes to public-facing declarations were made.

Possibly related PRs

• chore: rearrange footer items #1258: Adjusts the placement and grouping of keyboard-shortcuts trigger and footer link layout within the footer structure
• fix: visible focus rendering of footer's privacy policy link #1110: Modifies desktop links container styling within the same AppFooter links block
• fix(ui): app footer layout and build environment on narrow screens #1032: Changes DOM placement and conditional rendering of the BuildEnvironment component in the footer layout

Suggested reviewers

• danielroe
• whitep4nth3r
• trueberryless

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the footer layout refactoring with before/after screenshots demonstrating the visual improvements.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

app/components/AppFooter.vue (1)

39-39: Drop inline focus-visible utilities on this button.

Line 39 adds focus-visible:(...) classes to a <button>. This project already defines button/select focus-visible styles globally, so this should rely on the shared rule instead of per-element utilities.

Suggested diff

-              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200"
+              class="cursor-pointer group inline-flex gap-x-1 items-center justify-center underline-offset-[0.2rem] underline decoration-1 decoration-fg/30 font-mono text-fg hover:(decoration-accent text-accent) transition-colors duration-200"

Based on learnings: “focus-visible styling for buttons and selects is applied globally via main.css ... individual buttons or selects in Vue components should not rely on inline focus-visible utility classes”.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e939665 and 8c489e0.

📒 Files selected for processing (1)

• app/components/AppFooter.vue

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!