Standardise size of tabgroup buttons in tabset to match that of non-tabgroup buttons.

[yucheng11122017]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• DevOps
• Improve developer experience
• Others, please explain:

Duplicate of #2038, hence closes #2038
Resolves #2037

Overview of changes:
Standardized the size of tab group
\

Initially: Clickable region for tab group is only at the arrow.

This is different from the clickable region for the non tab group which is the entire tab including the white space

Changed the clickable region for the tab group to the entire button (arrow and white space)

Anything you'd like to highlight/discuss:
This deals with problem raised in #2038 regarding the additional padding in nav-page by setting padding to be 0 in ul.
An alternative is to remove the nav-link in page-nav suggested in #2038 but this would not be consistent with bootstrap nav components. This would also be considered a breaking change

Testing instructions:
Confirm clickable region by hovering over tabgroup and non-tabgroup buttons in rendered page.

Proposed commit message: (wrap lines at 72 characters)
Unify tabset sizing across tabgroup and non-tabgroup buttons

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[tlylt]

Hi @yucheng11122017, could you explain the changes made in this PR? We are now ok with a breaking change if necessary. Just a side note I think not removing nav-link in the navbar would be best, as that's how bootstrap nav component works.

[yucheng11122017]

Hi @tlylt,
Basically what @petermonky did was to shift the nav-link from tabset to dropdown instead to enable the entire region to be clicked instead of just the tabset button (which is only the arrow) to standardise it with the tab buttons.
But because nav bar also uses nav-link to wrap dropdowns, he suggested to remove the navlink so that the double padding will not be applied since the nav-link class is already applied within the dropdown itself.

But personally I think it's not the best idea as well. So instead I implemented the workaround suggested by @jonahtanjz to just remove the padding nav-link on the outer <li> element

[tlylt]

Anything you'd like to highlight/discuss:
This deals with #2038 (comment) in #2038 regarding the additional padding in nav-page by setting padding to be 0 in ul. This should be a temporary workaround until a release with breaking changes is ready to be released.

@yucheng11122017 is this part in the description still relevant?

[yucheng11122017]

Anything you'd like to highlight/discuss:
This deals with #2038 (comment) in #2038 regarding the additional padding in nav-page by setting padding to be 0 in ul. This should be a temporary workaround until a release with breaking changes is ready to be released.

@yucheng11122017 is this part in the description still relevant?

imo no and updated the description accordingly. I'll leave it there as an alternative if anyone believes otherwise.

[tlylt]

Currently on markbind-master:

This PR:

The previous discussion in the original PR seems to be valid here as well.

Lastly, can you write about how one might migrate an existing MarkBind site to accommodate this change after this is merged? (Or is this not breaking? then the above example should not produce problematic output when no changes are made to the source?)

[yucheng11122017]

Currently on markbind-master: This PR:

The previous discussion in the original PR seems to be valid here as well.

Hi @tlylt, could I check where did you see this error? The PR deploy review seems to be show the padding correctly. Its from the nav bar right

Lastly, can you write about how one might migrate an existing MarkBind site to accommodate this change after this is merged? (Or is this not breaking? then the above example should not produce problematic output when no changes are made to the source?)

There should be no breaking changes.

[tlylt]

Currently on markbind-master: This PR:
The previous discussion in the original PR seems to be valid here as well.

Hi @tlylt, could I check where did you see this error? The PR deploy review seems to be show the padding correctly. Its from the nav bar right

Lastly, can you write about how one might migrate an existing MarkBind site to accommodate this change after this is merged? (Or is this not breaking? then the above example should not produce problematic output when no changes are made to the source?)

There should be no breaking changes.

Thanks for checking, I might have looked at the PR preview of the original PR.

stale

[lhw-1]

LGTM aside from a nit! This should, though small, improve the user experience for dropdowns :)

[lhw-1]

Also, after this fix, the area that a dropdown occupies in a navbar is now larger than normal navbar elements (just a cosmetic change, so I have no issues, just highlighting it):

Before:

After:

[yucheng11122017]

Also, after this fix, the area that a dropdown occupies in a navbar is now larger than normal navbar elements (just a cosmetic change, so I have no issues, just highlighting it):

Before:

After:

Thanks for pointing this out hyungwoon! I think nav-link naturally adds padding-right and padding-left which results in this behavior. Is it ok to keep this behaviour?

[yucheng11122017]

Also, after this fix, the area that a dropdown occupies in a navbar is now larger than normal navbar elements (just a cosmetic change, so I have no issues, just highlighting it):

Before:

After:

Hi @lhw-1, thanks for the comments! I changed the selector to nav-link > nav-link to remove the padding for the inner nav link in dropdowns. This seems to solve the issue.

[EltonGohJH]

LGTM