openedx / openedx/paragon

[Fix] Tab button group right border

Open Beginner friendly
#4,293 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
140
Forks
100
Avg merge
1h 3m
Merged PRs (30d)
30

Description

Paragon Tab button group does not have a right hand radius in most cases:

Image

Currently, the final element in the button-group is always an overflow More tab. When the tab bar container is wide enough to display all tabs, the More tab is hidden.

The :last-child selector is where the right radius gets rendered. Currently, that More tab is getting the last-child selector, even when it's hidden.

Desired behavior
Button groups should have outer radius on the left hand side for the first button-tab, and the right hand side for the last button tab.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Locate the Tab button-group component and its styling, then inspect how the hidden More tab affects the :last-child selector. Done means the visible final tab receives the right outer radius while the first tab retains the left radius when all tabs fit and More is hidden.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
design, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.