Leadspace Overflow: Breakpoint for c4d--leadspace__overlay is not applied

[ferrine]

Description

In the stackblitz example

https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-lead-space--super

it is noticeable that the total width of the component exceeds the screen width

It causes issues with horizontal scrolling

Hotfix

After couple of hours of investigation, the issue was identified to be the inline-size of this container.

As I see in the source code it was intended to apply inline-size: auto after the breakpoint.

carbon-for-ibm-dotcom/packages/styles/scss/components/leadspace/_leadspace.scss

Lines 195 to 198 in 9925af3

	@include breakpoint-down(md) {
	inline-size: auto;
	}
	}

And indeed if I manually change this property the layout is good.

I suspect there is an issue with the breakpoint and how scss got compiled, but this is beyond of what I can figure out now. But in the component css there are only two mentions of the inline size: mine and the initial one (which is 100% and works on fullscreen)

Other solutions

Other than figuring out the breakpoint one can set inline-size: auto just above in the media independent scope

carbon-for-ibm-dotcom/packages/styles/scss/components/leadspace/_leadspace.scss

Lines 186 to 193 in 9925af3

	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	inline-size: 100%;
	max-inline-size: none;
	padding-block-start: $spacing-05;

But it will cause a slight shift in gradient on full screen:

Before

After

Conclusions

I believe the solution with fixing breakpoint application is what has to be done since it can potentially affect future derivative work, but as for a temporary fix, I modify this inline-size in my component code.

Component(s) impacted

leadspace

Browser

Chrome, Safari

Carbon for IBM.com version

v2.7.0

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

stuff

Package

@carbon/ibmdotcom-web-components

CodeSandbox example

https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/stackblitz/components/leadspace?file=index.html

Steps to reproduce the issue (if applicable)

Storybook example is broken

Release date (if applicable)

https://github.com/carbon-design-system/carbon-for-ibm-dotcom/releases/tag/v2.7.0

Code of Conduct

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