Flagsmith / Flagsmith/flagsmith

Tab overflow dropdown menu has styling issues

Open
#6,592 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
Python
Stars
6.6k
Forks
567
Avg merge
1d 13h
Merged PRs (30d)
121

Description

## Description

The tab overflow dropdown menu in the feature modal displays with styling issues:
1. Extra whitespace before the text in menu items
2. Inconsistent purple backgrounds on menu items

## Screenshot

The dropdown menu items (Code References, Links, History, Settings) show visual inconsistencies due to the `TabButton` component being unnecessarily used inside the dropdown.

## Root Cause

The dropdown menu items were wrapping the label in a `TabButton` component with complex className combinations, causing:
- Unnecessary wrapper div with flexbox styling
- Button styling conflicting with dropdown item styling
- `full-width` class stretching elements and centring text

## Proposed Solution

Simplify the dropdown menu items to use `tabLabel` directly instead of wrapping it in a `TabButton` component.

## Related

Part of UI cleanup/redesign effort discussed internally.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.