[Tabs extended media]: Mobile has content too close to tabs

[RichKummer]

Description

When in the @sm breakpoint and a tab is expanded, the area of the tab is overlapping the Tab's heading inside the content. On @sms, there should be 16px between the bottom of the tab and the top of the heading.

Design specs for mobile

Component(s) impacted

Tabs extended media

Browser

Safari

Carbon for IBM.com version

v1.31.0-rc.1

Severity

Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.

Application/website

C4IBM.com

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/web-components-react/iframe.html?id=components-tabs-extended-media--default&knob-Heading=Title%20heading&knob-Alignment=left&knob-Media%20type=video&knob-Image%20alt%20text=Lorem%20ipsum&knob-Heading%20(heading):=Aliquam%20condimentum&knob-CTA%201%20type%20(cta-type):=local&knob-CTA%201%20copy%20(cta-copy):=Learn%20more&knob-CTA%201%20href%20(cta-href):=https://www.ibm.com&knob-CTA%202%20type%20(cta-type):=external&knob-CTA%202%20copy%20(cta-copy):=Microservices%20and%20containers&knob-CTA%202%20href%20(cta-href):=https://www.ibm.com&knob-Tag%20Type:_TagGroup=Tag%20Link

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[ljcarot]

@RichKummer replace with correct screenshot

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.