Skip to content

Fix: right-aligned dropdown menus overflow off the right edge of the page#15137

Open
stevewallone wants to merge 1 commit into
DefectDojo:bugfixfrom
stevewallone:fix/dropdown-menu-right-alignment
Open

Fix: right-aligned dropdown menus overflow off the right edge of the page#15137
stevewallone wants to merge 1 commit into
DefectDojo:bugfixfrom
stevewallone:fix/dropdown-menu-right-alignment

Conversation

@stevewallone

@stevewallone stevewallone commented Jul 1, 2026

Copy link
Copy Markdown

Description

Fixes #15125.

When bootstrap.min.css was dropped, the essential Bootstrap dropdown rules
were 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-menu but omitted the .dropdown-menu-right
utility
(right: 0; left: auto).

As a result, every menu marked class="dropdown-menu dropdown-menu-right" lost
its right-alignment and fell back to left-alignment (left: 0), opening to the
right 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:

.dropdown-menu-right { right: 0; left: auto; }

The sibling .dropdown-menu-left variant has 0 usages in the templates, so
it 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>:

  • Before: menu right edge at x=1645 vs viewport 1435 → overflows; page
    scrollWidth 1645 (horizontal scroll present); labels clipped.
  • After: menu right-aligns to the toggle, right edge x=1552 vs viewport
    1589 → fully on-page; scrollWidth == viewport (no horizontal scroll); all
    labels readable.

The rebuilt tailwind-out.css diff is exactly one inserted rule
(.dropdown-menu-right{left:auto;right:0}) — built with tailwindcss 4.2.4 to
match the version that produced the committed artifact, so no unrelated churn.
makemigrations --check is not applicable (no model changes).

Documentation

None — internal CSS regression, no user-facing docs reference this.

Checklist

  • Bugfix submitted against the bugfix branch.
  • Meaningful PR name for release notes.
  • Ruff compliant (no Python changed).
  • Python 3.13 compliant (no Python changed).
  • No model changes / migrations.
  • Unit tests — N/A (CSS-only; verified manually with before/after evidence).
  • Categorised as a bugfix — please add the bugfix label (fork PRs can't set labels).

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 Maffooch added this to the 3.1.0 milestone Jul 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants