Fix: Dashboard icons appearing over menu bar#2374
Conversation
WalkthroughLowered z-index values for several DashStats UI elements in CSS and added a trailing newline; added a server-side conditional to set the dialog z-index when the Sidebar Theme is active in DashStats.page. Changes
Sequence Diagram(s)sequenceDiagram
participant Page as DashStats.page (server)
participant Browser as Client
Note over Page: Existing dialogStyle() JS output
Browser->>Page: Request page
Page-->>Browser: HTML + JS (includes dialogStyle)
alt Sidebar Theme active ($themeHelper->isSidebarTheme() == true)
Note over Page,Browser #d6f5d6: server injects dialog z-index line
Browser->>Browser: execute dialogStyle()\nset .ui-dialog z-index to 2001
else Sidebar Theme not active
Browser->>Browser: execute dialogStyle()\n(no injected z-index line)
end
Browser->>Browser: CSS from DashStats.css applied\n(a.cpu_close, span.hand, .port_view, .control at lower z-index)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests
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}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
emhttp/plugins/dynamix/sheets/DashStats.css (2)
244-248: Sanity-check stacking vs. header/menu; ensure positioned elements.z-index: 100 should solve bleed-over, but confirm:
- The header/menu bar’s z-index is > 100.
- a.cpu_close and span.hand are positioned (non-static); otherwise z-index is ignored.
If you want to avoid future z-index skirmishes, consider scoping these controls under a local stacking context (e.g., container with position: relative; isolation: isolate).
289-292: Verify interaction with dialogs/tooltips using similar z-layers.Setting .port_view, .control to z-index: 100 may collide with UI frameworks that also use ~100 for dialogs/tooltips. Please quickly check that:
- jQuery UI dialogs, menus, or tooltips (if present) still overlay these controls.
- Hover/click targets in the header remain accessible.
If there’s any conflict, drop these to 90 or raise dialogs header to a higher, centralized token.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
emhttp/plugins/dynamix/sheets/DashStats.css(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Squidly271
PR: unraid/webgui#0
File: :0-0
Timestamp: 2025-05-31T05:10:13.120Z
Learning: Squidly271 prefers not to receive CodeRabbit reviews or feedback while PRs are in draft status. Only provide reviews after PRs are moved out of draft.
🔇 Additional comments (1)
emhttp/plugins/dynamix/sheets/DashStats.css (1)
528-530: Trailing newline added — good hygiene.EOF newline helps with POSIX tooling and diffs.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
emhttp/plugins/dynamix/DashStats.page (2)
2030-2033: Also raise the overlay’s z-index to block sidebar clicks when a dialog is open (Sidebar theme).Only bumping
.ui-dialogcan leave.ui-widget-overlaybeneath the sidebar/menu, allowing unintended interactions. Raise the overlay just below the dialog.- <? if ($themeHelper->isSidebarTheme()):?> - $('.ui-dialog').css({'z-index':'2001'}); - <? endif;?> + <? if ($themeHelper->isSidebarTheme()):?> + // Keep overlay above sidebar but below dialog + $('.ui-widget-overlay').css({'z-index':'2000'}); + $('.ui-dialog').css({'z-index':'2001'}); + <? endif;?>Please verify on Sidebar theme:
- Open “Tile Management” and confirm the sidebar/menu cannot be clicked and visually sits under the dim overlay.
- Sanity‑check TopNav theme remains unchanged.
2030-2033: Optional: avoid magic numbers and global selector.Consider centralizing z-index values (CSS var or theme constant) and scoping to the created dialog (e.g.,
box.parents('.ui-dialog')) instead of all.ui-dialoginstances to reduce unintended side effects.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
emhttp/plugins/dynamix/DashStats.page(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: Squidly271
PR: unraid/webgui#0
File: :0-0
Timestamp: 2025-05-31T05:10:13.120Z
Learning: Squidly271 prefers not to receive CodeRabbit reviews or feedback while PRs are in draft status. Only provide reviews after PRs are moved out of draft.
2 participants
Summary by CodeRabbit