Skip to content

Conversation

@barath46
Copy link

@barath46 barath46 commented Dec 23, 2025

Summary:
This PR fixes toolbar dropdown UI issues that appear when Lexxy is embedded in applications using global CSS frameworks/resets (e.g. Bootstrap, Tailwind preflight). In those environments, framework styles can override native element defaults and affect Lexxy’s toolbar dropdown controls, resulting in misaligned UI—most noticeably for the Link tool and Color highlight tool.

Problem:
Lexxy renders correctly in isolation, but when Bootstrap/Tailwind is included:

  • marker appears: the overflow/trigger UI can show a list/disclosure marker that shouldn’t be visible.
  • Alignment is off: the dropdown triggers/content for Link and Color highlight no longer appear centered/aligned as intended.
  • Overflow dropdown width is incorrect: the dropdown menu can become constrained, causing a cramped layout and worsening the perceived alignment.
    This is caused by global framework styles targeting native elements (like summary) and/or generic dropdown-related styling that unintentionally leaks into Lexxy UI.

Fix:
The fix hardens Lexxy’s toolbar dropdown styles by explicitly setting the necessary summary and dropdown sizing rules within Lexxy’s own scoped selectors:

  • Remove marker styling and normalize summary presentation so it doesn’t inherit framework defaults.
  • Ensure the dropdown menu can size appropriately (not artificially constrained by external CSS), improving the layout and alignment for Link/Highlight dropdowns.

Changes are scoped to Lexxy toolbar dropdown/overflow elements to avoid impacting application-level styles.

How to reproduce:

  1. Use Lexxy in a Rails app (Action Text / rich_text_area).
  2. Add Bootstrap or Tailwind (global reset/preflight).
  3. Open the editor toolbar and use:
    • Link tool dropdown
    • Color highlight tool dropdown
  4. Observe misalignment and marker/width issues.

After this PR, dropdown triggers and menus render consistently even with Bootstrap/Tailwind present.

Screenshots / Before & After:

Before:

Screenshot 2025-12-23 at 5 17 05 PM Screenshot 2025-12-23 at 5 17 45 PM

After:

Screenshot 2025-12-23 at 8 09 39 PM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant