Tabbed code blocks under admonitions and other elements

[facelessuser]

Description

New tabbed code looks weird on mobile when under an admonition or details element. I've noticed that that you have this style in the superfences.scss:

    // [mobile +]: Collapse tab labels
    @include break-from-device(tablet) {
      border: 0.1rem solid $md-color-black--lightest;
    }

I understand there is the same kind of logic for this as code blocks so that on mobile, it spreads to the width of the page, but in admonitions and details, there is an exception that prevents code blocks from doing this in them, but there doesn't seem to be the same exception for tabbed code blocks:

Expected behavior

Tabbed code blocks should not be transformed to extend to full width when under elements like admonitions etc. There may be more scenarios, but I'm not sure yet.

Actual behavior

On mobile devices, it attempts to extend tabbed code blocks to full width stripping the border and making them look odd.

Steps to reproduce the bug

1. View tabbed code under an admonition on a mobile device.

Package versions

• Python: NA
• MkDocs: NA
• Material: 2.8.0

Project configuration

NA

System information

• OS: NA
• Browser: NA

[squidfunk]

I thought I catched all cases :D Thanks for reporting! It should be exactly like you wrote - only stretch to full width on the root level. I will provide a fix.

[squidfunk]

Fixed in 87f9a3a

[squidfunk]

Released as part of 2.9.0