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.

/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)
npmx.dev	Ready	Preview, Comment	Feb 5, 2026 2:26am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 5, 2026 2:26am
npmx-lunaria	Ignored		Feb 5, 2026 2:26am

[coderabbitai]

📝 Walkthrough

Walkthrough

BuildEnvironment rendering was moved in AppFooter to a separate container while retaining the same v-if="!isHome" conditional. BuildEnvironment now accepts an optional prop buildInfo?: BuildInfo with a computed fallback to appConfig.buildInfo and a minor change to the root div class bindings. modules/build-env.ts adds and uses EnvType, initialises appConfig.buildInfo with a test payload when process.env.TEST is set, otherwise derives values via getEnv. shared/types adds EnvType and updates BuildInfo.env. New unit tests were added for AppFooter and BuildEnvironment.

Suggested reviewers

• danielroe
• 43081j

🚥 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 component, updating styles, and refactoring to accept BuildInfo prop for mocking purposes.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 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