Skip to content

fix(web): align mobile header identity and update actions - #2111

Merged
Eli Bosley (elibosley) merged 5 commits into
mainfrom
fix/header-mobile-server-name
Oct 13, 2026
Merged

Eli Bosley (elibosley) merged 5 commits into
mainfrom
fix/header-mobile-server-name

Conversation

@elibosley

@elibosley Eli Bosley (elibosley) commented Oct 13, 2026 •

Copy link
Copy Markdown
Member

Summary

Keep the mobile server name beside the OS version, place storage below it, and make the update action readable at every header width.

Why This Exists

The server name competed with the account controls on mobile and could align with a wrapped reboot notice instead of the version. The longer update label and missing desktop badge padding also made the header crowded.

Work intent: preserve the existing 640px breakpoint and mounted controls while improving server identity, storage placement, and update action spacing.

Resolution

Reuse the existing header grid. Align the name and version on their first baselines, let update actions wrap within the left column, and put compact array usage in the right column. Use “Reboot to Update” for the header action while retaining the full explanation in its tooltip.

Reviewer Considerations

  • Check narrow widths with long server names and longer translated update notices.
  • The explicit scoped badge padding handles the existing nested .unapi reset.
  • The legacy header keeps the default array usage presentation. The consolidated header opts into compact usage.

Behavior Changes

  • On mobile, the smaller server name sits to the right of the version and storage sits below the name.
  • On desktop, storage sits below the account controls and update badges retain their padding.
  • Reboot links and other update states keep their existing behavior.

Implementation Summary

  • Adjust the consolidated header grid and add optional compact array usage.
  • Add the localized update action label and scoped badge padding.
  • Keep the preview's mocked hostname consistent with its selected server name.

Verification

  • At e6a0a6c73ade1b35b0f5627783bf38d3ff0228c7, all 28 tests passed across Header, HeaderThemes, HeaderOsVersion, and HeaderServerStatus using Vitest.
  • ESLint, Prettier, and the production web build passed.
  • Browser checks covered 320, 390, 639, 640, 728, and 1440px, long names, optional storage, and update states. No header overflow was observed.
  • Installed the built bundle on a retained Unraid 7.4.0-rc.1 QA server. Verified all 145 file checksums and the live mobile name/version alignment. Update-state fixtures were checked in the local preview.

Risk

Limited to header presentation and one label. Responsive browser checks cover the breakpoint and narrow layouts; no dependencies, backend behavior, or lockfiles change.

@coderabbitai

coderabbitai Bot commented Oct 13, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 061bb0a1-d648-41fd-8889-2370c7229439
📥 Commits

Reviewing files that changed from the base of the PR and between d19a6f4 and e6a0a6c.

📒 Files selected for processing (5)
  • web/src/components/Header.standalone.vue
  • web/src/components/Header/ArrayUsage.vue
  • web/src/components/Header/HeaderVersion.vue
  • web/src/locales/en.json
  • web/test-pages/combined-header.js

Included review availability: This review used your included allowance. Your plan provides up to 2 included reviews per hour; 1 remain after this review.

Walkthrough

The standalone header now places its server name, version and update content, actions, status, and array usage in revised desktop and mobile positions. ArrayUsage supports compact mode. Update reboot status uses a dedicated translated label, and combined-header test data uses the configured server name.

Changes

Header presentation

Layer / File(s) Summary
Responsive header composition
web/src/components/Header/ArrayUsage.vue, web/src/components/Header.standalone.vue, web/src/components/Header/HeaderVersion.vue, web/test-pages/combined-header.js
ArrayUsage adds a compact layout option. The standalone header repositions its content for desktop and mobile. The version trigger gains a class, and combined-header test data uses the configured server name.
Reboot update status
web/src/components/Header/HeaderVersion.vue, web/src/locales/en.json
Update reboot status uses the translated “Reboot to Update” label. The status button has shared padding and fit-content width styling.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: ⚪ Minimal · up to e6a0a

The header changes appear ready to merge after normal checks; no actionable issue is established.

Pre-merge checks · Passed 5
Passed Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the primary changes to the mobile header identity and update actions.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

A rabbit hops beneath the header’s glow
Compact bars line up in rows below
The server name finds its place in view
“Reboot to Update” appears in words anew
The rabbit nods, then bounds away
While tidy grid cells greet the day

Comment @coderabbitai help to get the list of available commands.

@linear-code
linear-code Bot marked this pull request as ready for review October 13, 2026 18:07
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 13, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-13T18:11:25.595904Z e6a0a6c Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@codecov

codecov Bot commented Oct 13, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 60.00000% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.32%. Comparing base (d19a6f4) to head (e6a0a6c).

Files with missing lines Patch % Lines
web/src/components/Header/HeaderVersion.vue 25.00% 3 Missing ⚠️
web/test-pages/combined-header.js 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2111      +/-   ##
==========================================
+ Coverage   53.29%   53.32%   +0.02%     
==========================================
  Files        1045     1045              
  Lines       72906    72910       +4     
  Branches     8443     8455      +12     
==========================================
+ Hits        38854    38876      +22     
+ Misses      33924    33906      -18     
  Partials      128      128              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

Copy link
Copy Markdown
Contributor

This plugin has been deployed to Cloudflare R2 and is available for testing.
Download it at this URL:

https://preview.dl.unraid.net/unraid-api/tag/PR2111/dynamix.unraid.net.plg

@elibosley
Eli Bosley (elibosley) merged commit 6582cc1 into main Oct 13, 2026
12 of 14 checks passed
@elibosley
Eli Bosley (elibosley) deleted the fix/header-mobile-server-name branch October 13, 2026 18:22
@github-actions

Copy link
Copy Markdown
Contributor

🔄 PR Merged - Plugin Redirected to Staging

This PR has been merged and the preview plugin has been updated to redirect to the staging version.

For users testing this PR:

  • Your plugin will automatically update to the staging version on the next update check
  • The staging version includes all merged changes from this PR
  • No manual intervention required

Staging URL:

https://preview.dl.unraid.net/unraid-api/dynamix.unraid.net.plg

Thank you for testing! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant