Is-Active Double Bottom Border

[MuaviyaImran]

The "is-active" class is being assigned twice, leading to an unintended double border at the bottom of the current active tab. Here is the relevant HTML snippet for reference:

<li class="nav-item is-active" role="presentation">
    <a role="tab" class="tabs-component-tab-a is-active" aria-controls="company-info-pane" href="#company-info" 
    tabindex="0" aria-selected="true">
        Company Info
    </a>
</li>

Example

which leads double border on the bottom of current active tab I am giving styles to is-active class as follows:

.is-active {
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid #00DC8C;
}

To resolve this, I would like to take responsibility for fixing this issue. I believe that ensuring only one element receives the is-active class will eliminate the styling conflict and improve the user experience.

Please assign this issue to me so I can proceed with the fix. If there is a recommended approach for addressing this issue or if it has already been resolved in a recent update, kindly let me know.

Thank you for your attention to this matter. I look forward to your response. @Jacobs63

[Jacobs63]

Hello, the is-active should rather be considered as a modifier. I don't see why this class could not be on both elements, since they're both active.

The simple resolution would be:

.nav-item.is-active {
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid #00DC8C;
}

Or:

.tabs-component-tab-a.is-active {
  font-weight: 500;
  padding-bottom: 10px;
  border-bottom: 1px solid #00DC8C;
}

I do not believe this to be an package issue when it is not caused by the package, rather by using a css selector that does not apply to the desired element.

[MuaviyaImran]

I got your point Thank You so much..