Skip to content

fix: increase z-index on PageLink and ResourceLink dropdowns#1427

Open
ksnitsky wants to merge 1 commit intoSpinaCMS:mainfrom
ksnitsky:fix/pagelink-dropdown
Open

fix: increase z-index on PageLink and ResourceLink dropdowns#1427
ksnitsky wants to merge 1 commit intoSpinaCMS:mainfrom
ksnitsky:fix/pagelink-dropdown

Conversation

@ksnitsky
Copy link
Copy Markdown

@ksnitsky ksnitsky commented Apr 6, 2026

Closes #1426.

Context

The PageLink and ResourceLink part types render a dropdown picker (page/resource selector) using an absolutely positioned div with z-10. When one of these parts is placed before a rich text (Spina::Parts::Text) part in the theme configuration, the Trix editor toolbar renders on top of the open dropdown, making it impossible to select a page. This is because the Trix toolbar element sits later in the DOM flow and visually overlaps the z-10 dropdown.

Changes proposed in this pull request

Bump the z-index on the dropdown panel from z-10 to z-50 in both page_links/_form.html.erb and resource_links/_form.html.erb. This ensures the picker dropdown renders above any sibling form elements (Trix toolbars, other inputs) while remaining below Spina's modal overlays (z-40 with fixed positioning, which creates a separate stacking context).

Guidance to review PR

  1. In any Spina theme, place a PageLink part immediately before a Text (rich text) part in a section or view template.
  2. Open the page editor in Spina admin and click the page picker button — the dropdown should now render fully on top of the Trix toolbar.
  3. Verify that Spina modals (e.g. media picker) still render above the dropdown when both are open.

The page/resource picker dropdown used z-10 which was not enough
to overlay subsequent form elements (e.g. Trix toolbar). Bump to
z-50 so the dropdown always renders on top.
@ksnitsky ksnitsky changed the title fix: raise z-index on PageLink and ResourceLink dropdowns fix: increase z-index on PageLink and ResourceLink dropdowns Apr 7, 2026
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.

trix-toolbar overlaps PageLink dropdown

1 participant