fix(ui): select dropdown obscured by header in landscape mode

[ahmed-abdat]

Fixes #14073

Select dropdown menus are obscured by the AppHeader when opening upward in landscape mobile mode because the ReactSelect menu has z-index: 4 while the AppHeader has z-index: 30. This PR adds a new CSS variable --z-select-menu: 35 to the global z-index system and applies it to ReactSelect menu styles, placing the dropdown above the header while maintaining the established z-index hierarchy. This follows the existing pattern used in PR #13908 for the SearchBar z-index fix.

[tyteen4a03]

This sort of fixes the issue but I think the select list should just be forced to flow downward, if it's possible.

[ahmed-abdat]

Thanks @tyteen4a03! I see two options:

1. menuPlacement="bottom" (your suggestion)

• Simpler, no z-index needed
• But: loses intelligent positioning, risk of cut-off dropdowns in landscape

2. Enhanced z-index (current)

• Follows Payload's pattern: same fix in packages/richtext-lexical/src/features/blocks/client/component/index.scss:6
• Recent PRs used this approach (fix(ui): folder filters hidden behind results #13908, fix(ui): popup list controls overlap with table in list view #13967)
• I've added z-index: 1 to Select container for complete fix:

.field-type.select {
  // Fixes Select dropdown hidden behind AppHeader in landscape mode
  z-index: 1;
}

Which approach do you prefer? I can switch to menuPlacement="bottom" if you want simplicity over the intelligent positioning.

[tyteen4a03]

The menu should still flow upwards in some scenarios (e.g. at the bottom of the page), so I don't think we should force menu placement to always go down. But I'll let the Payload team decide on this one.

[ahmed-abdat]

Thanks for the feedback @tyteen4a03! Agreed - preserving the intelligent positioning is important.
Looking forward to the team's decision.