feat(header): reintroduce consolidated <unraid-header> + matched boot logo - #2701
Open
Eli Bosley (elibosley) wants to merge 10 commits into
Open
feat(header): reintroduce consolidated <unraid-header> + matched boot logo#2701Eli Bosley (elibosley) wants to merge 10 commits into
Eli Bosley (elibosley) wants to merge 10 commits into
Conversation
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
WalkthroughThe PR adds a configurable header logo style, renders the consolidated ChangesConsolidated header
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant HeaderPHP
participant ServerState
participant UnraidHeader
HeaderPHP->>ServerState: Load server state
HeaderPHP->>UnraidHeader: Pass header attributes and boot-logo markup
UnraidHeader-->>HeaderPHP: Render consolidated header
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 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.
Eli Bosley (elibosley)
force-pushed
the
fix/consolidated-header-boot-logo
branch
2 times, most recently
from
July 22, 2026 19:31
b6e4383 to
e0fdf8b
Compare
Eli Bosley (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.
Eli Bosley (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
The consolidated header code only ships in 7.4+, so the version_compare gate against /etc/unraid-version was redundant.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (2)
emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php (2)
27-32: 🎯 Functional Correctness | 🟡 MinorKeep the mobile boot logo centered.
Below 640px, the fallback remains an inline-flex column with
align-items: flex-start, and the mobile rule does not make it full-width and center its contents. This can leave the pre-mount logo left-aligned while the mounted header centers it.Proposed adjustment
`@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: 64-70
🤖 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 27 - 32, Update the mobile styles for `#header.unraid-consolidated-header` .unraid-header-boot-logo below 640px so the fallback logo spans the available width and centers its contents, overriding the desktop align-items: flex-start behavior. Preserve the existing inline-flex column layout while matching the mounted header’s centered mobile alignment.
49-52: 🎯 Functional Correctness | 🟡 MinorUse the mounted header’s breakpoint for boot-logo sizing.
The fallback SVG expands at 30rem (480px), but the mounted layout switches at 640px. Between 480px and 639.98px, the fallback and mounted logo sizes differ, causing a visible resize on mount.
Proposed adjustment
- `@media` (min-width: 30rem) { + `@media` (min-width: 640px) {🤖 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 49 - 52, Update the media-query breakpoint governing `#header.unraid-consolidated-header` .unraid-header-boot-logo svg from 30rem to the mounted header’s 640px breakpoint, keeping fallback and mounted logo sizing consistent below that threshold.
🤖 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.
Duplicate comments:
In `@emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php`:
- Around line 27-32: Update the mobile styles for
`#header.unraid-consolidated-header` .unraid-header-boot-logo below 640px so the
fallback logo spans the available width and centers its contents, overriding the
desktop align-items: flex-start behavior. Preserve the existing inline-flex
column layout while matching the mounted header’s centered mobile alignment.
- Around line 49-52: Update the media-query breakpoint governing
`#header.unraid-consolidated-header` .unraid-header-boot-logo svg from 30rem to
the mounted header’s 640px breakpoint, keeping fallback and mounted logo sizing
consistent below that threshold.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1c7b28f0-ac92-4e62-9ee3-14df4cf504ba
📒 Files selected for processing (1)
emhttp/plugins/dynamix/include/DefaultPageLayout/Header.php
background-size: 100% 86px assumed a fixed height, but the consolidated header grows with its content (meta row, array-usage bar), so the banner image was getting cropped once the box exceeded 86px.
The light-DOM boot placeholder must land exactly where the mounted <unraid-header> logo/version render, or the logo jumps on upgrade (QA FAIL: ~12px down on desktop, plus right on sidebar themes). - Pin the boot logo/version to the measured mounted positions (logo top 12px desktop / 28px mobile; version follows at a 13px visual gap). Use px, not rem: the webgui light DOM roots at 62.5% (1rem=10px) while the mounted .unapi scope roots at 16px, so rem rendered the version half-size (the size flash). - Render a real version placeholder (info icon + OS version) mirroring the mounted HeaderVersion so the group height matches by construction. - Share #UnraidHeader's left inset with the boot logo so the horizontal position tracks across breakpoints. - Boot logo now honors the theme-adaptive (black/white) logo option like the mounted HeaderLogo, not just the gradient. Verified on devgen.local (7.3.2): boot vs mounted match within <1px at 375px and 1280px.
The mounted version color (--header-text-secondary) is only defined in the mounted .unapi scope, so var(--header-text-secondary) in the light DOM fell back to the inherited near-black header text, then flashed to gray on mount. Use a fixed neutral #999 placeholder: exact on white/black themes, a gentle shift (vs #606e7f) on gray/azure, no dark->gray flash.
The boot version info-icon and logo SVGs had a viewBox but no width/height attributes, so before the inline <style> applied they rendered at the SVG default (~300px), shoving the version text far right, then snapping left once CSS sized them (the 'spaced out, flashes right-to-left' FOUC). Add explicit width/height attributes so the SVGs are correctly sized from the first paint, independent of CSS timing.
Even with the boot CSS in an inline <style>, the version could paint for one frame in inline flow (to the right of the logo) before the stylesheet applied, then snap left once the flex-column layout kicked in. Move the critical layout (flex column, left-aligned, gap, neutral color) to inline style attributes on the boot markup so it is correct from the first painted frame, independent of stylesheet timing. Responsive bits (padding-top, logo width, font-size) stay in the <style> block.
… icon The boot logo svg rules used a descendant selector (.unraid-header-boot-logo svg) that also matched the version info icon below it. Same specificity, later source order, so the logo width (16rem/160px) overrode the icon's 12px, stretching it to 160x12 and shoving the version number to the right (the 'spaced out, right-to-left' flash). Scope the logo rules to the logo link (.unraid-header-boot-logo a svg) so they never touch the version icon. Diagnosed by measuring the frozen boot placeholder: version icon computed width was 160px.
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