Issue #3327848 by rishu_kumar, Gauravvvv, lauriii, _utsavsharma, ameymudras,...

Issue #3327848 by rishu_kumar, Gauravvvv, lauriii, _utsavsharma, ameymudras, smustgrave: Claro: Wrong background for active vertical tab

core/themes/claro/css/components/details.css

@@ -417,7 +417,9 @@ td .claro-details {
   background-color: var(--color-gray-050-o-40);
 }
 
-@media screen and (min-width: 48em) {
+/* @see Drupal.behaviors.verticalTabs */
+
+@media screen and (min-width: 40.0625rem) {
   .claro-details__wrapper {
     margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
   }
@@ -427,9 +429,7 @@ td .claro-details {
   .claro-details__wrapper--vertical-tabs-item {
     margin: 0;
   }
-}
 
-@media screen and (min-width: 85em) {
   .js .claro-details__wrapper--vertical-tabs-item {
     margin: 0;
     border-top: 0;

core/themes/claro/css/components/details.pcss.css

@@ -391,7 +391,8 @@
   background-color: var(--color-gray-050-o-40);
 }
 
-@media screen and (min-width: 48em) {
+/* @see Drupal.behaviors.verticalTabs */
+@media screen and (min-width: 641px) {
   .claro-details__wrapper {
     margin: var(--space-l) var(--details-desktop-wrapper-padding-start);
   }
@@ -401,9 +402,7 @@
   .claro-details__wrapper--vertical-tabs-item {
     margin: 0;
   }
-}
 
-@media screen and (min-width: 85em) {
   .js .claro-details__wrapper--vertical-tabs-item {
     margin: 0;
     border-top: 0;