Claro: Wrong background for active vertical tab

background color above 85em, we have transparent background

  @media screen and (min-width: 85em){
.js .claro-details__wrapper--vertical-tabs-item {
  margin: 0;
  border-top: 0;
 background-color: transparent;

Just a query/understanding on design aspect,
What is the need or use of background color on narrow device, cant we keep same in all screen?

I've create a patch for that.

some steps follow to apply patch:-
1.Download patch and apply to core.
2.There is some default file in /sites/default/files/css/ you have to delete those files because those default css files are not allowing to update
new files.
3.After that you review the issue.

I attached some screenshot also.

Thanks

Tested patch #4 on 10.1.x. Was able to reproduce the issue on small screen size. After apply the patch issue fixes for the narrow screen size however the issue now starts appearing for desktop size. Please see the screenshot attached.

Hi @ameymudras , I tried to reproduce issue as per your screenshot, But I can not able to reproduce the same. Can you please provide your testing steps, so I can resolve this as well.
See attached screenshot

@rishu_kumar, I tested it again on chrome and safari and I am able to see the different background colours on all the tabs except "pages". On Claro theme you can configure any block and check "Roles" tab in the visibility section.

I used Drupal pod to generate an environment using the patch you've provided.

This is my updated patch and follow same instructions like #4 comment.

Thanks

I will review this patch.

I applied patch #10, it applied cleanly, and the issue was resolved (see attached images). It can be moved to RTBC.

I will double check the patch.

I have tested patch comment #10. And it worked fine for me. Please see attached.

I have applied #10 patch, its working properly attached screenshots.

The background should be white like on larger screens.

One set of screenshots is all that is needed for each patch. Here, there are three sets, which makes it confusing and harder to review. Please, do not add new screenshots after they have already been added!

Remove the bg-color as advised in #18. Attached interdiff with #10. Attached patch for same. Please review

Able to reproduce the issue using steps in IS
Applied patch #19 on Drupal 10.1.x-dev
The patch applied cleanly.
The background gets removed from the active verticle tab on smaller screens
Refer to the attached screenshots

RTBC +1

I confirm @DeepaliJ's findings!

RTBC ✅

The solution appears to deviate from the original Claro designs. Perhaps someone involved with the design such as @ckrina or @saschaeggi should approve or potentially recommend a solution that preserves the design.

The root cause seems to be that we're using incorrect media query in Claro for this rule. This implements a fix according to the designs; keeps the light blue background on mobile and overrides that with a white background on desktop.

This fix isn't entirely correct because Drupal.behaviors.verticalTabs allows configuring the breakpoint through drupalSettings. Since the variable would be needed in media query, we would have to use custom media query for this. That is not supported by any browsers so there probably isn't any value in implementing that right now.

The Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

Tried to fix CCF for #25.

Patch #27, contains few irrelevant files.

core/modules/block/src/BlockMachineNameGenerator.php
core/modules/block/src/BlockMachineNameGeneratorInterface.php

I have fixed one comment in #25. Please review

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

Confirmed this issue on Drupal 10.1 and that the patch #28 solves it.

Looks like my patch in #25 introduced an off-by-one error 😅 Because this one is a min-width and the other usage is a max-width, we need to increase the breakpoint by one px.

This is committed to 10.1.x and cherry-picked to 10.0.x. Lauri points out that Drupal.behaviors.verticalTabs allows the breakpoint to be configurable, but I'd still consider this an unqualified fix as the media query now matches default breakpoint value. Having it match the configured value (of which there is no evidence of it being used) is something that deserves its own scope.

Issue credit was not granted to the many, many screenshots provided after a perfectly good set was already there. +1s without additional issue-advancing content also did not receive credit