fix(header): preserve mobile banner proportions

[Eli Bosley (elibosley)]

Summary

Preserve banner image proportions on mobile while retaining the existing desktop sizing.

Related independent API header refinement: unraid/api#2111. This stylesheet fix also applies to the existing consolidated header.

Why This Exists

The consolidated header stretches its background to 100% 100%, which squashes the banner on mobile as the header becomes taller.

Resolution

Below 640px, use centered cover sizing on the outer WebGUI header. Keep 100% 100% sizing from 640px upward.

Reviewer Considerations

Mobile crops the banner edges to preserve its proportions. The outer header belongs to WebGUI, so the rule lives in its stylesheet.

Behavior Changes

Mobile banners scale uniformly and crop from the center. Desktop and legacy header sizing stay unchanged.

Implementation Summary

Add one mobile media query for #header.unraid-consolidated-header in default-base.css.

Verification

• git diff --check passed at 12e8600f3f9f7286259a9787fa75902b0f74df98.
• Installed the exact stylesheet on a retained Unraid 7.4.0-rc.1 QA server and verified its checksum.
• Live browser checks: 320, 390, and 639px use centered cover; 640, 768, 1440, and 2560px retain 100% 100%.
• No header overflow was observed. The 2560px check exceeds the banner's original width.

Risk

Low; one selector changes only below the existing mobile breakpoint. Cropping is intentional on mobile.

Summary by CodeRabbit

• Style
  • Updated the consolidated header background on screens narrower than 640px to use cover sizing and centered positioning; desktop sizing remains unchanged.

[coderabbitai]

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: 691a26da-65ff-4982-8a5c-f4fdc29feb76

📥 Commits

Reviewing files that changed from the base of the PR and between 26eb1b5 and 12e8600.

📒 Files selected for processing (1)

• emhttp/plugins/dynamix/styles/default-base.css

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 consolidated header banner retains its desktop background sizing. Below 640px, it uses cover sizing and centered positioning. The desktop explanatory comment is shorter.

Changes

Header Banner

Layer / File(s)	Summary
Responsive banner styling emhttp/plugins/dynamix/styles/default-base.css	The desktop banner retains background-size: 100% 100%. Below 640px, it uses cover and centered positioning. The desktop explanatory comment is shorter.

Priority: ⬇️ Low

Estimated code review effort: 1 (Trivial) | ~5 minutes

Change: Bug fix

Suggested reviewers: simonfair

Merge Risk: ⚪ Minimal · up to 12e86

The mobile consolidated banner uses centered cover sizing below 640px while desktop sizing is retained. No actionable merge risk is evident from the inspected change.

Pre-merge checks · 5

Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: preserving mobile banner proportions while fixing header background sizing.
Docstring Coverage		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 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• 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

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit checks the banner’s place
It centers neatly, soft with grace
On narrow screens, it covers wide
The desktop keeps its sizing guide
The header shines, the hare hops by}

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

[github-actions]

🔧 PR Test Plugin Available

A test plugin has been generated for this PR that includes the modified files.

Version: 2026.10.13.1804
Build: View Workflow Run

📥 Installation Instructions:

Install via Unraid Web UI:

1. Go to Plugins → Install Plugin
2. Copy and paste this URL:

https://preview.dl.unraid.net/pr-plugins/pr-2788/webgui-pr-2788.plg

3. Click Install

Alternative: Direct Download

• 📦 Download PLG
• 📦 Download TXZ

⚠️ Important Notes:

• Testing only: This plugin is for testing PR changes
• Backup included: Original files are automatically backed up
• Easy removal: Files are restored when plugin is removed
• Conflicts: Remove this plugin before installing production updates
• Post-merge behavior: This preview stays available after merge until preview storage expires or it is manually cleaned up

📝 Modified Files:

Click to expand file list

emhttp/plugins/dynamix/styles/default-base.css

🔄 To Remove:

Navigate to Plugins → Installed Plugins and remove webgui-pr-2788, or run:

plugin remove webgui-pr-2788

---

_{🤖 This comment is automatically generated and will be updated with each new push to this PR.}