[Eli Bosley (elibosley)]

Summary

Restore the banner color fade on the componentized header and keep a smooth fade behind the controls on the right.

Why This Exists

Work Intent: make the existing banner fade setting work on Unraid 7.3 without changing the unified header.

The native header contains .unapi components, so prefixing its banner selectors with .unapi prevents them from matching. Once enabled, the previous overlay also ends abruptly and changes the profile controls' positioning.

Resolution

Keep native banner selectors outside the component scope, exclude .unraid-consolidated-header, and paint a continuous right-side gradient behind the existing header content.

Reviewer Considerations

• The PostCSS exception applies to native banner selectors. Other component styles remain scoped.
• Both ::before and the production optimizer's :before form have regression coverage.
• The unified header shares the outer #header.image element, so every compatibility rule explicitly excludes its container class.

Behavior Changes

• Enabling banner fade shades the right-side controls without adding a left fade.
• The profile controls retain their original containing block and layout.
• The unified header keeps its existing gradient.

Implementation Summary

• Add the native banner selector exception to the existing CSS scope owner.
• Replace the clipped gradient tiles and child-position overrides with an isolated background overlay.
• Cover legacy matching, unified-header exclusion, fade eligibility, and unrelated selector isolation.

Verification

• pnpm test src/__tests__/scopeTailwindToUnapi.spec.ts __test__/components/HeaderThemes.test.ts: 23 tests passed.
• pnpm codegen, pnpm build, targeted ESLint/Prettier, and the full web pre-commit lint/format hook passed.
• Inspected the production CSS and verified installed CSS/manifest digests on Unraid 7.3.2.
• Browser inspection confirmed the right-only fade and restored profile layout at narrow and desktop widths.

Risk

The shared scope plugin is the main compatibility boundary. Selector regressions cover the unified markup, and existing unified-header theme tests pass. A live unified-header browser run was not performed.

Summary by CodeRabbit

• Style
  • Updated banner styling for the native WebGUI header, including a responsive gradient and improved color fallback.
  • Banner effects now apply only when the header is not in consolidated-header mode.
  • Unrelated header and banner styles remain scoped to the app.

[chatgpt-codex-connector]

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-26T18:41:02.856022Z	823ee7e	PR opened

ℹ️ About Codex in GitHub

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

• Open a pull request for review
• Mark a draft as ready
• Comment "Codex (@codex) review" or "Codex (@codex) security review".

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

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Repository UI
• Review profile: CHILL
• Plan: Advanced
• Run ID: b97e3332-bb8b-45c1-aa58-debd1469252b

Commits

Reviewing files that changed from the base of the PR and between 05ba1bf and 823ee7e.

Files selected for processing: 3

• web/postcss/scopeTailwindToUnapi.ts
• web/src/__tests__/scopeTailwindToUnapi.spec.ts
• web/src/assets/main.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 Tailwind scoping plugin now leaves matching native WebGUI header selectors unscoped. The image-header CSS excludes consolidated headers and uses a pseudo-element gradient with different styling at widths up to 768px.

Changes

Native WebGUI banner

Layer / File(s)	Summary
Exempt native header selectors web/postcss/scopeTailwindToUnapi.ts, web/src/__tests__/scopeTailwindToUnapi.spec.ts	The plugin leaves matching native header selectors unscoped. Tests check header and banner state changes, and confirm unrelated selectors retain .unapi scoping.
Update image-header banner styles web/src/assets/main.css	Image-header rules exclude consolidated headers. The gradient uses an isolated ::before pseudo-element and changes direction and stops at widths up to 768px. Import paths use single quotes; imported files and layers are unchanged.

Priority: Low

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

Change: Bug fix

Suggested reviewers: pujitm

Merge Risk: Minimal · up to 823ee

No confirmed merge-blocking issue remains; proceed with normal checks.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 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 primary change: restoring the right-side banner fade on legacy web headers.
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.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 2 files. (1 skipped: 1 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Finishing Touches: 💡 1

📝 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

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit sees the banner glow,
A header wears a gradient show.
The scoped rules step aside,
While mobile colors turn and glide.
I nibble CSS, then hop away.}

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 53.97%. Comparing base (05ba1bf) to head (823ee7e).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2126      +/-   ##
==========================================
+ Coverage   53.94%   53.97%   +0.02%     
==========================================
  Files        1046     1046              
  Lines       73606    73610       +4     
  Branches     8825     8834       +9     
==========================================
+ Hits        39707    39730      +23     
+ Misses      33771    33752      -19     
  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]

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/PR2126/dynamix.unraid.net.plg

[github-actions]

🔄 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! 🚀

[dktrekkie]

Eli Bosley (@elibosley)

Thanks for fixing the missing fade! There is still one issue with longer server descriptions though: the new fixed-width gradient leaves the beginning of the description over the banner, making it unreadable with a dark banner.

Previously, the fade followed the width of the description/profile area. I understand the header is being consolidated, and this suggestion only concerns the legacy header during that transition.

I tested a temporary CSS change that disables the outer fixed-width gradient and renders var(--banner-gradient) on #UserProfile::before instead, keeping the :not(.unraid-consolidated-header) restriction. This restores the previous appearance with longer descriptions.

Could the legacy fade follow the profile content width again, while leaving the consolidated header unchanged?

For reference, this is the temporary F12 snippet I used to test it. This produces the expected appearance with my long description; the actual source implementation is up to you.

document.getElementById('test-header-fade')?.remove();

const style = document.createElement('style');
style.id = 'test-header-fade';
style.textContent = `
.has-banner-gradient #header.image:not(.unraid-consolidated-header)::before {
  content: none !important;
}

.has-banner-gradient #header.image:not(.unraid-consolidated-header) #UserProfile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--banner-gradient);
}
`;
document.head.appendChild(style);