Repository navigation
fix: open a title-bar dropdown under its own button - #74
Merged
Merged
Conversation
The right-alignment guard added for title-bar dropdowns pinned the panel with `right: 0`, but `div.dropdown_menu` is unpositioned (AA leaves it `display: inline`) and the theme resets `#titlebar_right` to static — so the panel resolved against `#title_bar` instead and every menu opened at the bar's far right, under whichever action item happens to sit last. Only bars with a dropdown that is not the rightmost item showed it. Make the dropdown its own containing block, so `right: 0` means the trigger's right edge. inline-block over AA's `display: inline`: an inline box's containing block spans its text fragments, and the whitespace around the button in the markup pushed the panel a few pixels past it. The nipple is pinned right for the same reason - AA offsets the arrow from the panel's left edge by the button's centre, which lands it on empty bar once the panel is right-aligned. The dummy app's wide table now carries four action items, two of them dropdowns, one of those in the middle - the shape that reproduces it.
There was a problem hiding this comment.
🟢 Approval recommended
The focused positioning changes address the reported issue with no identified blockers.
No open issues 🎉
What changed in this PR
Fixes title-bar dropdowns opening beneath the wrong action item in the ActiveAdmin theme.
Changes:
- Anchors each dropdown panel to its own button.
- Aligns the panel arrow with the button’s caret.
- Adds a multi-action dummy page example with middle and rightmost dropdowns.
| File | Description |
|---|---|
| test/dummy/app/admin/wide_table.rb | Adds action items that reproduce the alignment issue. |
| app/assets/stylesheets/wigu/active_admin_theme.scss | Positions dropdown panels and arrows beneath their triggers. |
Review effort: Balanced
Fivell
force-pushed
the
fix/title-bar-dropdown-alignment
branch
from
October 20, 2026 16:12
745b838 to
9d2fbeb
Compare
Member
Author
Merged
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
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.



Problem
The right-alignment guard for title-bar dropdowns pins the panel with
right: 0 !important. Butdiv.dropdown_menuis unpositioned — ActiveAdminleaves it
display: inline— and the theme resets#titlebar_righttoposition: static, so the panel's containing block ends up being#title_bar(sticky). Every menu therefore opened at the bar's far right, under whichever
action item sits last, instead of under the button that was clicked.
A bar whose only dropdown is the rightmost item looks fine, which is why this
slipped through; it shows up as soon as a dropdown has another action item
after it.
Fix
Give
div.dropdown_menuposition: relativesoright: 0means the trigger'sright edge, plus
display: inline-block— an inline box's containing blockspans its text fragments, and the whitespace around the button in AA's markup
pushed the panel a few pixels past the button.
The nipple needs the same treatment: AA offsets the arrow from the panel's
left edge by the button's centre, which lands it on empty bar once the panel
is right-aligned. It is now pinned right, centred on the button's own caret.
Test case
test/dummy's wide table now renders four action items — two of themdropdowns, one of those in the middle — the shape that reproduces it.
Measured on that page (bar 1200px wide, panel right edge vs. button right edge):
Actions(middle)More(last)rake csspasses.