Fix dropdown z-index on docker page when clicking on container icon

[Joly0]

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 OS-178

[coderabbitai]

Walkthrough

The 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.

Changes

Docker container dropdown styling

Layer / File(s)	Summary
Dropdown z-index and spacer element emhttp/plugins/dynamix.docker.manager/javascript/docker.js	After the dropdown context menu is attached, z-index is set to 10001 on #dropdown-<id> and a hidden spacer <li> is appended to ensure proper positioning and stacking.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

A docker dropdown was hiding behind,
So a spacer and z-index, we find!
Ten thousand and one, a hoppy delight,
Now menus pop up, stacked just right. 🐰✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: fixing dropdown z-index positioning on the Docker page when interacting with container icons.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with 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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

emhttp/plugins/dynamix.docker.manager/javascript/docker.js (1)

54-55: ⚡ Quick win

Make 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

📥 Commits

Reviewing files that changed from the base of the PR and between b78d577 and d464bda.

📒 Files selected for processing (1)

• emhttp/plugins/dynamix.docker.manager/javascript/docker.js

[github-actions]

🔧 PR Test Plugin Available

A test plugin has been generated for this PR that includes the modified files.

Version: 2026.05.14.1501
Build: View Workflow Run

📥 Installation Instructions:

Install via Unraid Web UI:

1. Go to Plugins → Install Plugin
2. Copy and paste this URL:

https://preview.dl.unraid.net/pr-plugins/pr-2639/webgui-pr-2639.plg

3. Click Install

Alternative: Direct Download

• 📦 Download PLG
• 📦 Download TXZ

⚠️ Important Notes:

• Testing only: This plugin is for testing PR changes
• Backup included: Original files are automatically backed up
• Easy removal: Files are restored when plugin is removed
• Conflicts: Remove this plugin before installing production updates
• Post-merge behavior: This preview stays available after merge until preview storage expires or it is manually cleaned up

📝 Modified Files:

Click to expand file list

emhttp/plugins/dynamix.docker.manager/javascript/docker.js

🔄 To Remove:

Navigate to Plugins → Installed Plugins and remove webgui-pr-2639, or run:

plugin remove webgui-pr-2639

---

_{🤖 This comment is automatically generated and will be updated with each new push to this PR.}

[elibosley]

Thank you! This looks like a good fix to get in the OS :)

[Joly0]

Hey @elibosley thanks forlooking into it and considering adding it. I was just wondering why the backport fix was instantly approved and merged but this PR here wasn't/isn't? Would just like to understand the reason for that :)

[elibosley]

Hey @Joly0 - good question! We're working on a 7.2.7 release, rest assured your PR to master will be merged and tested shortly, but our priority is this next 7.2 patch release before a 7.3 follow up, hence the merge of that PR first. We'll be shipping 7.2.7 next week and likely 7.3.1 a bit later.

[Joly0]

Hey @Joly0 - good question! We're working on a 7.2.7 release, rest assured your PR to master will be merged and tested shortly, but our priority is this next 7.2 patch release before a 7.3 follow up, hence the merge of that PR first. We'll be shipping 7.2.7 next week and likely 7.3.1 a bit later.

Ahh, got it. Makes sense. Was just a bit confused, but that explains it. Thanks ☺️

[SimonFair]

Hi @Joly0 I saw you fix and have used for the VM context menus also. I did notice that even though it is now in front of the footer some of the content is off screen. So for the VMs I also implemented a change to position the menu above the icon if near the bottom of the page. #2642 is my VM PR. Might be worth doing something similar for this PR?

[Joly0]

Hi @Joly0 I saw you fix and have used for the VM context menus also. I did notice that even though it is now in front of the footer some of the content is off screen. So for the VMs I also implemented a change to position the menu above the icon if near the bottom of the page. #2642 is my VM PR. Might be worth doing something similar for this PR?

Hey @SimonFair i also thought about it, but i decided against changing that (atleast without first discussing it) and therefore went for the most easy solution i could think of.
In my case with my changes in place the dropdown does not overlay with the footer anymore (had that problem while testing aswell when trying different approaches) but thats why i added it simply by appending the spacer which "should" (and for me does) provide enough space between the bottom of the dropdown and the footer, so nothing should overlay anymore.
Not sure why the same fix shouldnt work for the VM tab aswell

[SimonFair]

Hi @Joly0 I saw you fix and have used for the VM context menus also. I did notice that even though it is now in front of the footer some of the content is off screen. So for the VMs I also implemented a change to position the menu above the icon if near the bottom of the page. #2642 is my VM PR. Might be worth doing something similar for this PR?

Hey @SimonFair i also thought about it, but i decided against changing that (atleast without first discussing it) and therefore went for the most easy solution i could think of. In my case with my changes in place the dropdown does not overlay with the footer anymore (had that problem while testing aswell when trying different approaches) but thats why i added it simply by appending the spacer which "should" (and for me does) provide enough space between the bottom of the dropdown and the footer, so nothing should overlay anymore. Not sure why the same fix shouldnt work for the VM tab aswell

There are two modes in the settings, for page of auto and fixed, I normally run fixed for my vms on my test server just becaused I have so many and want the buttons at the bottom.