Fix dropdown z-index on docker page when clicking on container icon#2639
Fix dropdown z-index on docker page when clicking on container icon#2639Joly0 wants to merge 2 commits into
Conversation
Fixes clicking on a docker container when page has many containers the dropdown menu will be behind the footer and even outside the visible area because the scrollbar doesnt extend as far.
WalkthroughThe Docker manager's container context menu now receives a high z-index value and a hidden spacer element to correct stacking order and ensure the dropdown menu displays correctly above other page elements. ChangesDocker container dropdown styling
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. 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 |
Joly0
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
emhttp/plugins/dynamix.docker.manager/javascript/docker.js (1)
54-55: ⚡ Quick winMake spacer insertion idempotent.
This append is unconditional. If the context is rebound multiple times, spacer nodes can accumulate on the same dropdown. Add a guard (or remove existing spacer first) before appending.
Proposed change
- $('#dropdown-'+id).css('z-index', 10001) - .append('<li style="position:absolute;top:100%;left:0;width:1px;height:60px;pointer-events:none;list-style:none"></li>'); + var $dropdown = $('#dropdown-'+id).css('z-index', 10001); + $dropdown.find('.docker-dropdown-spacer').remove(); + $dropdown.append('<li class="docker-dropdown-spacer" style="position:absolute;top:100%;left:0;width:1px;height:60px;pointer-events:none;list-style:none" aria-hidden="true"></li>');🤖 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.docker.manager/javascript/docker.js` around lines 54 - 55, The spacer <li> is appended unconditionally to $('#dropdown-'+id) causing duplicates on rebinding; before appending, check for and remove any existing spacer (e.g., selector like '#dropdown-'+id + ' > li.spacer' or a unique attribute/class) or first call .find(...).remove() to ensure idempotency, then append a single spacer element (add a class or data-attr to the spacer so future runs can detect and avoid duplicating it).
🤖 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.
Nitpick comments:
In `@emhttp/plugins/dynamix.docker.manager/javascript/docker.js`:
- Around line 54-55: The spacer <li> is appended unconditionally to
$('#dropdown-'+id) causing duplicates on rebinding; before appending, check for
and remove any existing spacer (e.g., selector like '#dropdown-'+id + ' >
li.spacer' or a unique attribute/class) or first call .find(...).remove() to
ensure idempotency, then append a single spacer element (add a class or
data-attr to the spacer so future runs can detect and avoid duplicating it).
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 5764c60b-af1b-4743-b537-343b73c3f9c8
📒 Files selected for processing (1)
emhttp/plugins/dynamix.docker.manager/javascript/docker.js
🔧 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
|
|
Thank you! This looks like a good fix to get in the OS :) |
2 participants
Fixes clicking on a docker container when page has many containers the dropdown menu will be behind the footer and even outside the visible area because the scrollbar doesnt extend as far. The fix will make sure that the dropdown will always be in front of the footer if expanded and will increase the height slightly so the dropdown doesnt overlay the footer. Tested on multiple machines across 7.2.6 and 7.3.0
Before:
After:
Related to ENG-424