Tab highlights for current/hover/click are too high up when other tabs have 2 lines of text

Working on this issue as a part of Claro Contribution Day.

This is a small bug which needs some love from a (frontend) developer ☺️

This might be easily fixible with using

align-items: baseline;
height: 100%;

Hi saschaeggi,
I tried to reproduce this issue with Drupal 11.x version but as per the steps mentioned to
Install Module builder
But this module is not compatible with this version adding screenshot for the same.
Can we check this with d10 version or anything am missing on my end.
Thank you!

@BhumikaVarshney you can easily mock this situation by just duplicating a few tabs in the inspect mode

I added the MR by changing the nav bottom padding and alignment centre. Those two property solves the issues. Adding a screenshot for reference.

Can steps that don't require a contrib module be added?

But as a UI change will need before/after screenshots added to the issue summary (preferably with core), also the proposed solution added.

I can see some differences see screenshots -

Tabs with core-

Tabs with contrib module (module builder)

Here are some steps to reproduce:
* Login as admin
* Go to any content type/contact form or anything where we can see the tabs menu. eg. /admin/structure/types/manage/article/fields
* Try to replicate those tab menus by inspecting the page, So we can see the multiple tabs that can get the whole display width or adjust the screen size accordingly.
* Now check the tabs by enabling focus on it.

Here are the before and after images:
Before:

After:

Hi, I have verified this issue in Drupal 11 with the Claro theme. The issue related to the Tab highlights for current/hover/click is too high up when other tabs have 2 lines of text of the claro has been fixed.
Testing steps followed :
1. Install Drupal 11
2. Make the Claro theme
3. Go to the Content and check for tabs with 2 lines of text
4. Apply the patch
5. check for tabs will able to see Centraline text

Attaching the screenshots. Moving to RTBC

@kanchan-bhogade better do not assign task to yourself and status will be changed to RTBC by reporter or maintainer after verifying the screenshot. https://www.drupal.org/association/blog/a-drupal-contribution-guide-gues... →

Thanks.

has anyone tried the suggestion in #3? Having the items centered is not better than the current situation. I would expect the tabs to be aligned at the bottom so that the highlighted border is always against the white part of the page.

With the current patch the border floats in the middle for short menu items like "edit".

I have amended the MR by changing the alignment to end and making the list and anchors 100% in height to make all elements equal in height and align at the same level.
Please refer to the attached screenshots of after and before for normal and hover states.

Issue summary is incomplete, missing proposed solution and before/after screenshots in user interface changes.

I have updated the issue summary with proposed resolution and before/after screenshots.

Feedback on the MR

Changing the .tabs to .tabs__link will make the UI look like this ( screenshot: Tab-links-UI ) . Also the UI beaks on click of the tabs. This issue Needs more work.

zaryab_drupal → changed the visibility of the branch 3399956-tab-highlights-for to hidden.

Based on the numerous different approaches that have been tried, I think this isn't really in a novice task state ATM. Thanks!

Seems #22 mentions the current solution is breaking so moving to NW for that.

I have addressed #22, using a different approach for mobile and desktop. please review. thanks

Haven't tested it yet but I like this much better, thanks

The MR in #29 looks good. All tablinks are bottom aligned now. Attaching screenshots for ref.

I also see the border-bottom of focus outline is not visible. Do we need to keep it as it is or it also needs a fix?

Needs a rebase for the failures I believe. But if new solution can it please be documented in the issue summary.

Should be good

saving credits, MR needs work, comments incoming

nod_ → closed merge request !7997

I really wished the feedback in #3 had been followed early on, it would have saved 6 month of delay.

Fixed the duplicate selector on commit.

Committed and pushed 20a080c2e9 to 11.x and 4f8a463739 to 11.0.x and 42ffad694f to 10.4.x and f761bb6ab6 to 10.3.x.

Automatically closed - issue fixed for 2 weeks with no activity.