Fix: resolve z-index overlap between team size dropdown and team color field

[thecarinsiwa]

Description

This PR fixes a visual bug in the Team Settings page (Paramètres généraux) where the "Team Color" form elements were overlapping and bleeding through the "Team Size" dropdown menu (popover).
The issue occurred because the team size popover lacked a designated z-index while the team color field below it had a z-10 utility class.

Changes made

• Added the z-50 utility class to the PopoverPanel component in apps/web/core/components/teams/team-size-popover.tsx to establish a higher stacking context and ensure the popover always renders in the foreground.

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactor (code improvement without functional changes)

Related Issue

Fixes #4346

How Has This Been Tested?

• Navigated to Team Settings -> General Settings.
• Clicked on the "Team Size" input to open the popover.
• Verified that the dropdown menu fully covers the "Team Color" field and its icons without any visual overlap.

Screenshots (if applicable)

("Before")

("After")

⚠️⚠️⚠️ Reviewers Suggested

• @evereq
• @NdekoCode
• @Innocent-Akim

---

Summary by cubic

Fixes a z-index issue so the Team Size dropdown appears above the Team Color field in Team Settings. Removes the visual overlap and bleed-through.

• Bug Fixes
  • Added z-50 to the PopoverPanel in apps/web/core/components/teams/team-size-popover.tsx to ensure the popover stacks above nearby fields.

^{Written for commit 75869ca. Summary will update on new commits.}

Summary by CodeRabbit

• Style
  • Improved visual stacking order of the team size popover to prevent it from being hidden behind other elements.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 914689af-e6b3-45f4-a22b-34195cd3aec8

📥 Commits

Reviewing files that changed from the base of the PR and between 39640e1 and 75869ca.

📒 Files selected for processing (1)

• apps/web/core/components/teams/team-size-popover.tsx

---

Walkthrough

The Team Size dropdown popover's z-index is increased to z-50, ensuring it renders above the Team Color field and other underlying form elements to prevent visual overlap and maintain usability.

Changes

Team Size Popover Z-Index Fix

Layer / File(s)	Summary
PopoverPanel z-index stacking context apps/web/core/components/teams/team-size-popover.tsx	The PopoverPanel container's className is updated to include z-50 alongside existing styling, elevating its stacking context above form elements physically positioned beneath it.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

🐰 A popover climbed the z-stack so high,
No color field shall block its place,
With z-50 now reaching for the sky,
The dropdown shows each option's face!
~Bun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding z-index to resolve the z-index overlap issue between the team size dropdown and team color field.
Linked Issues check	✅ Passed	The pull request successfully implements the z-index fix by adding z-50 to the PopoverPanel, directly addressing the visual bug described in issue #4346.
Out of Scope Changes check	✅ Passed	The change is tightly scoped: only one file modified with a single line change to add z-50 class, directly related to resolving the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[greptile-apps]

Greptile Summary

This PR fixes a visual stacking bug on the Team Settings page where the Team Size popover was rendered behind the Team Color field (which carried z-10), causing its contents to bleed through the open dropdown.

• Adds z-50 to the PopoverPanel in team-size-popover.tsx, giving the popover a higher stacking context so it always renders above adjacent form elements.

Confidence Score: 5/5

Single-line CSS utility addition with no logic changes; safe to merge.

The only change is adding z-50 to a PopoverPanel className. The fix is correctly scoped — Headless UI v2's anchor prop portals the panel to the document body, so the z-index value is compared against other stacked elements in that context, and z-50 comfortably wins over the adjacent z-10 color field. No logic, data flow, or API surface was altered.

No files require special attention.

Important Files Changed

Filename	Overview
apps/web/core/components/teams/team-size-popover.tsx	Adds z-50 to PopoverPanel className to fix z-index overlap with the team color field; one-line, targeted fix with no side effects.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User clicks Team Size pencil icon] --> B[toggleDisabled sets disabled=false]
    B --> C[Transition show=true renders PopoverPanel]
    C --> D{z-index context}
    D -->|Before fix: no z-index on panel| E[Team Color field z-10 bleeds through]
    D -->|After fix: z-50 on panel| F[PopoverPanel renders above all z-10 siblings]
    F --> G[User selects size option]
    G --> H{Action}
    H -->|Save| I[handleSave: onSave called, setDisabled true]
    H -->|Cancel| J[handleClose: revert value, setDisabled true]
    H -->|Click outside| K[mousedown listener: setDisabled true]

Loading

_{Reviews (1): Last reviewed commit: "fix z-index overlap between team size dr..." | Re-trigger Greptile}

[Copilot]

Pull request overview

Fixes a UI stacking/context bug on the Team Settings “General Settings” page where the “Team Color” field (with a higher z-index) visually overlapped the “Team Size” dropdown popover.

Changes:

• Added a higher z-index (z-50) to the PopoverPanel in the Team Size popover so it reliably renders above adjacent form elements.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[cubic-dev-ai]

No issues found across 1 file

[codacy-production]

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity · 0 duplication

Metric	Results
Complexity	0
Duplication	0

View in Codacy

_{NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.}