feat(header): reintroduce consolidated <unraid-header> + matched boot logo#2701
Open
elibosley wants to merge 3 commits into
Open
feat(header): reintroduce consolidated <unraid-header> + matched boot logo#2701elibosley wants to merge 3 commits into
elibosley wants to merge 3 commits into
Conversation
Contributor
WalkthroughThe PR adds a configurable header logo style, enables consolidated headers for Unraid 7.4+, passes server and display state to ChangesConsolidated header configuration
Consolidated header rendering
Responsive header styling
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant HeaderPHP
participant ServerState
participant UnraidHeader
HeaderPHP->>HeaderPHP: Check Unraid version
HeaderPHP->>ServerState: Load server state
HeaderPHP->>UnraidHeader: Pass header attributes and logo markup
UnraidHeader-->>HeaderPHP: Render consolidated header
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
🔧 PR Test Plugin AvailableA test plugin has been generated for this PR that includes the modified files. Version: 📥 Installation Instructions:Install via Unraid Web UI:
Alternative: Direct Download
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php`:
- Around line 31-36: Update the mobile .unraid-header-boot-logo styling in both
referenced rule blocks to use horizontal centering for the column contents by
changing align-items from flex-start to center, while preserving the existing
vertical centering and other layout properties.
- Around line 54-58: Update the responsive rule for
`#header.unraid-consolidated-header` .unraid-header-boot-logo img so its desktop
width begins at the same sm/640px breakpoint used by the mounted header layout,
rather than at 30rem; preserve the existing 16rem width and other styles.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 63466cda-7814-48aa-a532-b1345768af88
📒 Files selected for processing (1)
emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php
Comment on lines
31
to
+36
| #header.unraid-consolidated-header .unraid-header-boot-logo { | ||
| display: inline-flex; | ||
| align-items: center; | ||
| flex-direction: column; | ||
| align-items: flex-start; | ||
| justify-content: center; | ||
| gap: 0.8rem; |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Center the boot logo horizontally on mobile.
justify-content: center centers the column vertically, while align-items: flex-start keeps the logo left-aligned. Since unraid-header is a full-width block host, this fallback does not match the mounted mobile layout.
`@media` (max-width: 639.98px) {
`#header.unraid-consolidated-header` .unraid-header-boot-logo {
+ display: flex;
+ width: 100%;
+ align-items: center;
height: 100%;
box-sizing: border-box;
justify-content: center;Also applies to: 69-75
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php` around lines 31
- 36, Update the mobile .unraid-header-boot-logo styling in both referenced rule
blocks to use horizontal centering for the column contents by changing
align-items from flex-start to center, while preserving the existing vertical
centering and other layout properties.
Comment on lines
+54
to
+58
| @media (min-width: 30rem) { | ||
| #header.unraid-consolidated-header .unraid-header-boot-logo img { | ||
| width: 16rem; | ||
| } | ||
| } |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Repository files matching Header.php:"
fd -a 'Header\.php$' . | sed 's#^\./##'
echo
echo "Relevant Header.php snippets:"
if [ -f emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php ]; then
wc -l emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php
sed -n '1,90p' emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php | cat -n
fi
echo
echo "Search for unraid-consolidated-header, sm breakpoint, and 30rem references:"
rg -n "unraid-consolidated-header|unraid-header|sm\\b|30rem|640px|breakpoint|min-width" . --iglob '*.{php,css,js,ts,html,md}' | head -200Repository: unraid/webgui
Length of output: 50372
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Check for package/config files that may define Tailwind breakpoints:"
git ls-files | grep -Ei '(^|/)(tailwind\.config\.(js|ts|cjs|mjs)|package\.json|package-lock\.json|yarn\.lock|pnpm-lock\.yaml)$' | while read -r f; do
echo "--- $f"
case "$f" in
*package.json) sed -n '1,220p' "$f";;
*tailwind*|*package-lock.json|*yarn.lock|*pnpm-lock.yaml) sed -n '1,160p' "$f";;
esac
doneRepository: unraid/webgui
Length of output: 2105
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "Search for unraid header mounted JS/CSS definitions:"
rg -n "unraid-header|unraid-consolidated-header|mounted|querySelector\\('unraid-header'|custom-elements|defineCustomElement|sm|640px|30rem" . --iglob '*.{php,css,js,ts,mjs,cjs,html,md}' | head -300
echo
echo "Find likely custom header files:"
fd -i 'unraid-header|header' . -t f | sed -n '1,120p'Repository: unraid/webgui
Length of output: 50370
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "File size:"
wc -l emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php
echo
echo "Header.php relevant lines:"
sed -n '40,70p' emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php | cat -n
echo
echo "Header.php unraid-header references (if any):"
rg -n "unraid-header|unraid-consolidated-header|script src|30rem|640px|sm|md" emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php || true
echo
echo "Focused source file matches excluding vendored ace/novnc directories:"
rg -n --glob '!emhttp/plugins/dynamix/javascript/ace/**' --glob '!emhttp/plugins/dynamix.vm.manager/novnc/**' \
'unraid-header|unraid-consolidated-header|media \(min-width: ?640px|media \(min-width: ?(sm|lg)|`@media` \(min-width: 30rem|`@media` \(min-width: 640px' . | head -200
echo
echo "Focused component/custom header files:"
git ls-files | grep -Ei 'unraid.?header|header' | grep -v -E '(^|/)(node_modules|\.git|ace|novnc)/' | sed -n '1,120p'Repository: unraid/webgui
Length of output: 6246
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "default-base consolidated header and breakpoint rules:"
rg -n --glob '!emhttp/plugins/dynamix/styles/default-base.css.map' \
'`#header`\.unraid-consolidated-header|unraid-consolidated-header|`@media` \(min-width: ?640px|`@media` \(min-width: 30rem|unraid-header-boot|unraid-header-os' \
emhttp/plugins/dynamix/styles/default-base.css | head -200
echo
echo "Relevant default-base ranges:"
sed -n '460,510p' emhttp/plugins/dynamix/styles/default-base.css | cat -n
sed -n '2415,2455p' emhttp/plugins/dynamix/styles/default-base.css | cat -n
echo
echo "Read-only invariant: exact breakpoint values tied to the consolidated header rules in Header.php"
python3 - <<'PY'
from pathlib import Path
import re
p = Path('emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php')
text = p.read_text()
needles = {
'light_image_30rem': re.search(r'`@media`\s*\(\s*min-width:\s*30rem\s*\)\s*\{[^}]*\.unraid-header-boot-logo\s+img\s*\{[^}]*/\*.*\*/\s*width:\s*16rem\s*;', text, re.S),
'version_block_640': re.search(r'`@media`\s*\(\s*min-width:\s*640px\s*\)\s*\{[^}]*\.unraid-header-boot-version\s*\{[^}]*display:\s*block;', text, re.S),
'boot_logo_max_639': re.search(r'`@media`\s*\(\s*max-width:\s*639\.98px\s*\)\s*\{[^}]*\.unraid-header-boot-logo\s*\{', text, re.S),
}
for k, m in needles.items():
print(f'{k}: {bool(m)}')
PYRepository: unraid/webgui
Length of output: 3444
Align the boot logo breakpoint with the consolidated header breakpoint.
In the 480–639px range, the logo switches to desktop sizes at 30rem but the mounted version pill and overall mounted-layout styles switch at sm (640px), so the light-DOM fallback doesn’t match the mounted header. Use the same breakpoint for the logo rule.
Proposed adjustment
- `@media` (min-width: 30rem) {
+ `@media` (min-width: 640px) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| @media (min-width: 30rem) { | |
| #header.unraid-consolidated-header .unraid-header-boot-logo img { | |
| width: 16rem; | |
| } | |
| } | |
| `@media` (min-width: 640px) { | |
| `#header.unraid-consolidated-header` .unraid-header-boot-logo img { | |
| width: 16rem; | |
| } | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php` around lines 54
- 58, Update the responsive rule for `#header.unraid-consolidated-header`
.unraid-header-boot-logo img so its desktop width begins at the same sm/640px
breakpoint used by the mounted header layout, rather than at 30rem; preserve the
existing 16rem width and other styles.
elibosley
force-pushed
the
fix/consolidated-header-boot-logo
branch
2 times, most recently
from
July 22, 2026 19:31
b6e4383 to
e0fdf8b
Compare
elibosley
changed the title
This reverts commit 6f4f2fd.
The pre-mount boot logo placeholder was a single centered 14rem <img>, while the mounted <unraid-header> logo is 16rem on desktop, sits higher (grouped with the version), is centered below the uptime strip on mobile, and renders as an inline SVG. That mismatch made the logo visibly resize, jump, and shimmer on mount. Reproduce the mounted logo's box in the static placeholder: match the responsive 14rem/16rem width, add an invisible version stub so it centers as the same group on desktop (same top offset), center below the uptime strip on mobile, and render the same inline gradient SVG (identical element/rendering to the mounted logo, and no separate asset fetch). The logo now stays put and paints seamlessly when the component upgrades.
The consolidated <unraid-header> ships with 7.4, so raise the version_compare gate and its fallback boundary from 7.3 to 7.4.
elibosley
force-pushed
the
fix/consolidated-header-boot-logo
branch
from
July 23, 2026 12:56
36f3f49 to
2a55f39
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@emhttp/plugins/dynamix/styles/default-base.css`:
- Around line 493-496: Update the header offset styles around
`#header.unraid-consolidated-header` `#UnraidHeader` so the unraid-header-boot-logo
placeholder inside unraid-header receives the same horizontal padding and
mounted offsets before replacement. Share the values through common CSS
variables or selectors, including the sidebar theme’s 64px plus 1rem offset,
while preserving the existing mounted-header layout.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 252aad80-6158-47e2-b1be-10d5d7e3d56a
📒 Files selected for processing (4)
emhttp/plugins/dynamix/DisplaySettings.pageemhttp/plugins/dynamix/default.cfgemhttp/plugins/dynamix/include/DefaultPageLayout/Header.phpemhttp/plugins/dynamix/styles/default-base.css
Comment on lines
+493
to
+496
| #header.unraid-consolidated-header #UnraidHeader { | ||
| min-height: inherit; | ||
| padding: .5rem 1rem; | ||
| } |
Contributor
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Apply the mounted header offsets to the boot placeholder.
Header.php renders .unraid-header-boot-logo directly inside <unraid-header>, but these rules add padding only after mount via #UnraidHeader. The placeholder therefore starts at a different horizontal position—especially in sidebar themes, where the mounted offset is 64px + 1rem—and visibly jumps when replaceChildren() runs. Share these offsets with the boot markup, preferably through common CSS variables or selectors.
Also applies to: 2437-2444
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 493 - 496,
Update the header offset styles around `#header.unraid-consolidated-header`
`#UnraidHeader` so the unraid-header-boot-logo placeholder inside unraid-header
receives the same horizontal padding and mounted offsets before replacement.
Share the values through common CSS variables or selectors, including the
sidebar theme’s 64px plus 1rem offset, while preserving the existing
mounted-header layout.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
The consolidated header (#2689) was merged, then reverted by #2702 (
revert-2689-feat/consolidated-header). This branch reverts that revert (reapplying #2689 in full —Header.php,default-base.css, et al.) and adds the boot-logo polish on top, so the consolidated header lands again with the mount jump/flash fixed.Merge after #2702. This branch is built on top of #2702's revert commit and reapplies it, so:
Commits
Revert "feat(header)..."— Revert "feat(header): gate consolidated <unraid-header> on Unraid 7.3+" #2702's revert (base).Reapply "feat(header)..."— revert of the revert: the consolidated header back.fix(header): match boot logo...— the logo polish (below).Logo polish
The pre-mount boot placeholder didn't match the mounted
<unraid-header>logo, so the logo resized, jumped, and shimmered on mount. Reproduce the mounted logo's box in the static placeholder:Verified on a 7.3.2 QA box: boot vs mounted logo measure identically (desktop 160px @ top=20, mobile 140px @ top≈42). Pairs with unraid/api#2037 (inlines the mounted logo SVG).
Summary by CodeRabbit