Fix: right-aligned dropdown menus overflow off the right edge of the page#15137
Merged
Maffooch merged 1 commit intoJul 2, 2026
Merged
Conversation
Since bootstrap.min.css is no longer loaded, the essential Bootstrap dropdown rules were re-implemented by hand in components/tailwind.css. That compat block omitted the `.dropdown-menu-right` utility (right: 0; left: auto), so every menu marked `dropdown-menu-right` (42 usages across 30+ templates, e.g. the finding actions menu) fell back to left-alignment and overflowed off the right edge of the page, clipping its labels and forcing horizontal page scroll. Restore the rule in the Bootstrap-compat block and rebuild tailwind-out.css (tailwindcss 4.2.4, matching the committed artifact). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Maffooch
approved these changes
Jul 1, 2026
blakeaowens
approved these changes
Jul 2, 2026
valentijnscholten
approved these changes
Jul 2, 2026
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.
Description
Fixes #15125.
When
bootstrap.min.csswas dropped, the essential Bootstrap dropdown ruleswere re-implemented by hand in
components/tailwind.css(the block commented"Bootstrap dropdown compat — since bootstrap.min.css is not loaded…"). That
compat block recreated
.dropdown-menubut omitted the.dropdown-menu-rightutility (
right: 0; left: auto).As a result, every menu marked
class="dropdown-menu dropdown-menu-right"lostits right-alignment and fell back to left-alignment (
left: 0), opening to theright of its toggle. Where the toggle sits flush against the right edge of the
page — most visibly the finding actions menu on the View Finding page — the
menu overflows off the right edge, clipping its labels ("Edit Fin…", "Copy
Fin…") and forcing the whole page into horizontal scroll.
This affects 42 usages across 30+ templates (findings, products,
engagements, tests, endpoints, users, metrics, …), not just the finding page.
The fix restores the single missing utility in the Bootstrap-compat block and
rebuilds
tailwind-out.css:The sibling
.dropdown-menu-leftvariant has 0 usages in the templates, soit is intentionally not added (keeping the change minimal).
Test results
No Python was touched, so there is no unit test to add — this is a pure
CSS/build change and DefectDojo has no CSS test harness. Verified manually in
the running app (
docker-compose), before and after, on/finding/<id>:scrollWidth1645 (horizontal scroll present); labels clipped.1589 → fully on-page;
scrollWidth== viewport (no horizontal scroll); alllabels readable.
The rebuilt
tailwind-out.cssdiff is exactly one inserted rule(
.dropdown-menu-right{left:auto;right:0}) — built with tailwindcss 4.2.4 tomatch the version that produced the committed artifact, so no unrelated churn.
makemigrations --checkis not applicable (no model changes).Documentation
None — internal CSS regression, no user-facing docs reference this.
Checklist
bugfixbranch.bugfixlabel (fork PRs can't set labels).