Merge pull request #132 from freshdesk/bugfix/#122-banner

fix(banner): system alerts is not responsive (#122)
freshworks · Feb 24, 2020 · 7d933b2 · 7d933b2
2 parents 5825621 + 1fe3570
commit 7d933b2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/banner/addon/styles/components/_nucleus-banner-item.scss b/packages/banner/addon/styles/components/_nucleus-banner-item.scss
@@ -18,6 +18,11 @@
     top: 8px;
     right: 16px;
   }
+
+  &__content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 
 .nucleus-banner--mini {

diff --git a/packages/banner/addon/styles/components/_nucleus-banner.scss b/packages/banner/addon/styles/components/_nucleus-banner.scss
@@ -34,7 +34,8 @@
       position: absolute;
       top: 40px;
       right: 0;
-      width: 400px;
+      max-width: 400px;
+      width: calc(100vw - 16px);
       background: #fff;
       box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .15);
       padding: 8px;
@@ -117,6 +118,7 @@
   @media screen and (min-width: $mobile-screen-min-width) and (max-width: $mobile-screen-max-width) {
     &__main {
       overflow-x: auto;
+      padding-left: 8px;
     }
   }
 }