fix(ui): fix app footer layout and build environment on narrow screens

[userquin]

This PR just moves the BuildEnvironment.vue after links container updating its styles to add some margins.

I need to add some test: from root run vite test --project nuxt -t BuildEnvironment

/cc @danielroe I haven't found a way to mock useAppConfig => small refactor at BuildEnvironment to accept BuildInfo and updated modules/build-env.ts to mock it (maybe using useRuntimeConfig().public instead ? ).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Error		Feb 5, 2026 2:43am
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 2:43am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 5, 2026 2:43am

[coderabbitai]

📝 Walkthrough

Walkthrough

BuildEnvironment was moved in AppFooter to a separate container while preserving the existing v-if="!isHome" condition. BuildEnvironment now accepts an optional buildInfo?: BuildInfo prop with a computed fallback to appConfig.buildInfo, and its root div class bindings were adjusted. modules/build-env.ts adds and uses the EnvType type and conditionally initialises appConfig.buildInfo with a test payload when process.env.TEST is set; otherwise it derives values via getEnv. shared/types adds EnvType and updates BuildInfo.env. Unit tests for AppFooter and BuildEnvironment were added.

Suggested reviewers

• danielroe

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the main changes: moving BuildEnvironment.vue after the links container, updating styles, and refactoring to accept BuildInfo prop.

_{✏️ 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

---

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

[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!

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

test/nuxt/components/AppFooter.spec.ts (1)

10-25: Prefer DOM assertions over full HTML string matches to reduce brittleness.

HTML string contains are fragile to class or attribute ordering changes. Consider asserting on elements/text/attributes instead.

♻️ Example adjustment

- const html = component.html()- expect(html).toContain('<span class="tracking-wider">dev</span>')- expect(html).toContain(- '<a href="https://github.com/npmx-dev/npmx.dev/commit/704987bba88909f3782d792c224bde989569acb9"',- )+ const env = component.find('span.tracking-wider')+ expect(env.exists()).toBe(true)+ expect(env.text()).toBe('dev')+ const commitLink = component.find('a[href*="commit/"]')+ expect(commitLink.exists()).toBe(true)

test/nuxt/components/BuildEnvironment.spec.ts (1)

7-22: Make the dev test self-contained by inlining BuildInfo.

Relying on useAppConfig() couples this test to Nuxt app initialisation. An explicit BuildInfo keeps it deterministic and focused.

♻️ Example adjustment

- const buildInfo = useAppConfig().buildInfo as BuildInfo+ const buildInfo: BuildInfo = {+ env: 'dev',+ version: '0.0.0',+ time: 1770237446424,+ commit: '704987bba88909f3782d792c224bde989569acb9',+ shortCommit: '704987b',+ branch: 'xxx',+ }

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

test/nuxt/components/AppFooter.spec.ts (1)

6-16: Consider using DOM queries for more resilient assertions.

The exact HTML string matching (e.g., <span class="tracking-wider">) is fragile—if class order changes or attributes are added, the test will break unexpectedly. Using Vue Test Utils selectors would be more maintainable.

♻️ Suggested refactor using DOM queries

 it('BuildEnvironment is properly displayed at settings', async () => {
const buildInfo = useAppConfig().buildInfo
const component = await mountSuspended(AppFooter, {
route: '/settings',
})
- const html = component.html()- expect(html).toContain(`<span class="tracking-wider">${buildInfo.env}</span>`)- expect(html).toContain(- `<a href="https://github.com/npmx-dev/npmx.dev/commit/${buildInfo.commit}"`,- )+ const envSpan = component.find('span.tracking-wider')+ expect(envSpan.exists()).toBe(true)+ expect(envSpan.text()).toBe(buildInfo.env)+ const commitLink = component.find(`a[href*="${buildInfo.commit}"]`)+ expect(commitLink.exists()).toBe(true)
})

[coderabbitai]

Actionable comments posted: 1

[userquin]

Actionable comments posted: 1

🧹 Nitpick comments (1)

fixed with last commit

[userquin]

Use version here

[userquin]

superseded by #1032