fix(inline-notification): fix inline-notification styles on mobile (#5763)

* fix(inline-notification): fix inline-notification styles on mobile

* fix(inline-notfication): fix ie11 bug

* fix(inline-notfication): remove top margin on mobile

Author: tw15egan

packages/components/src/components/notification/_inline-notification.scss

@@ -24,6 +24,7 @@
     @include reset;
 
     display: flex;
+    flex-wrap: wrap;
     position: relative;
     height: auto;
     min-height: rem(48px);
@@ -36,6 +37,7 @@
 
     @include carbon--breakpoint(md) {
       max-width: rem(608px);
+      flex-wrap: nowrap;
     }
 
     @include carbon--breakpoint(lg) {
@@ -158,7 +160,11 @@
   .#{$prefix}--inline-notification__details {
     display: flex;
     flex-grow: 1;
-    margin: 0 $carbon--spacing-05;
+    margin: 0 $carbon--spacing-09 0 $carbon--spacing-05;
+
+    @include carbon--breakpoint(md) {
+      margin: 0 $carbon--spacing-05;
+    }
   }
 
   .#{$prefix}--inline-notification__icon {
@@ -185,7 +191,12 @@
 
   .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
     height: rem(32px);
-    margin: $carbon--spacing-03 0;
+    margin-bottom: $carbon--spacing-03;
+    margin-left: $carbon--spacing-08;
+
+    @include carbon--breakpoint(md) {
+      margin: $carbon--spacing-03 0;
+    }
 
     &,
     &:hover,
@@ -212,6 +223,9 @@
 
   .#{$prefix}--inline-notification__close-button {
     @include focus-outline('reset');
+    position: absolute;
+    top: 0;
+    right: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -235,6 +249,10 @@
     .#{$prefix}--inline-notification__close-icon {
       fill: $inverse-01;
     }
+
+    @include carbon--breakpoint(md) {
+      position: static;
+    }
   }
 
   .#{$prefix}--inline-notification--low-contrast {

packages/react/src/components/Notification/Notification-story.js

@@ -26,11 +26,7 @@ const notificationProps = () => ({
   lowContrast: boolean('Use low contrast variant (lowContrast)', false),
   role: text('ARIA role (role)', 'alert'),
   title: text('Title (title)', 'Notification title'),
-  subtitle: (
-    <span>
-      Subtitle text goes here. <a href="#example">Example link</a>
-    </span>
-  ),
+  subtitle: text('Subtitle (subtitle)', 'Subtitle text goes here.'),
   iconDescription: text(
     'Icon description (iconDescription)',
     'describes the close button'