[Inline-Notification Bug]: Lacks responsive design to long action labels (On Mobile)

[william-glasse]

What package(s) are you using?

• carbon-components
• carbon-components-vue

Detailed description

Describe in detail the issue you're having.

In our application, we make use of a carbon inline notification to allow our users to provide feedback about their experience. The call to action label on the notification is long - 'Give us your feedback'. On mobile, this causes the notification to produce undesirable effects, namely:

• The main content (i.e. the subtitle) is has a small width, resulting in the notification stretching down the page. This is difficult to read.
• The Close button is outside of the Notification box, (functionally fine, but looks scrappy)

https://codesandbox.io/s/zen-wright-f9px3

Is this issue related to a specific component?

Inline Notification

What browser are you working in?

Chrome

What version of the Carbon Design System are you using?

10.10.2

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Work for IBM CIO team, with our release date being 27th March.
Note, as a temporary fix for our project, we have overwritten the inline notification class

.bx--inline-notification {
  min-width: 20rem;
  max-width: none
}

Steps to reproduce the issue

1. https://codesandbox.io/s/zen-wright-f9px3
2. Change the viewport to a mobile screen.

Additional information

• Screenshots or code

- Notes

[tw15egan]

@carbon-design-system/design How should we handle these situations on mobile? Here is what our current example looks like on iPhone (chrome dev tools)

[aagonzales]

The action should reflow to be positioned under the subtitle text.