Notification style fix

package.json

@@ -89,7 +89,7 @@
     "angular-idle-preload": "2.0.4",
     "angulartics2": "^5.2.0",
     "body-parser": "1.18.2",
-    "bootstrap": "^4.0.0",
+    "bootstrap": "4.1.1",
     "cerialize": "0.1.18",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",

src/app/shared/notifications/notification/notification.component.html

@@ -1,4 +1,4 @@
-<div class="alert {{notification.type}} alert-dismissible p-3" role="alert"
+<div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
      [@enterLeave]="animate">
 
   <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">

src/app/shared/notifications/notification/notification.component.scss

@@ -1,5 +1,11 @@
 @import '../../../../styles/variables.scss';
 
+.alert {
+  display: inline-block;
+  min-width: $modal-sm;
+  text-align: left;
+}
+
 .close {
   outline: none !important
 }

src/app/shared/notifications/notifications-board/notifications-board.component.scss

@@ -2,24 +2,25 @@
 @import '../../../../styles/mixins';
 
 .notifications-wrapper {
-  width: 300px;
+  z-index: $zindex-popover;
-  z-index: 1051;
+  text-align: right;
+  @include word-wrap;
 }
 
 .notifications-wrapper.left {
-  left: 20px;
+  left: 0;
 }
 
 .notifications-wrapper.top {
-  top: 20px;
+  top:0;
 }
 
 .notifications-wrapper.right {
-  right: 20px;
+  right: 0;
 }
 
 .notifications-wrapper.bottom {
-  bottom: 20px;
+  bottom: 0;
 }
 
 .notifications-wrapper.center {
@@ -39,7 +40,7 @@
 @media screen and (max-width: map-get($grid-breakpoints, sm)) {
   .notifications-wrapper {
     width: auto;
-    left: 20px;
+    left: 0;
-    right: 20px;
+    right: 0;
   }
 }

src/styles/_bootstrap_variables.scss

@@ -34,3 +34,4 @@ $navbar-light-color:                rgba(black, .5) !default;
 $navbar-dark-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-dark-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
 $navbar-light-toggler-icon-bg: url("data%3Aimage%2Fsvg+xml%3Bcharset%3Dutf8%2C%3Csvg+viewBox%3D%270+0+30+30%27+xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath+stroke%3D%27#{$navbar-light-color}%27+stroke-width%3D%272%27+stroke-linecap%3D%27round%27+stroke-miterlimit%3D%2710%27+d%3D%27M4+7h22M4+15h22M4+23h22%27%2F%3E%3C%2Fsvg%3E");
 
+$enable-shadows: true !default;

src/styles/_mixins.scss

@@ -1,3 +1,15 @@
 @import '../../node_modules/bootstrap/scss/functions.scss';
 @import '../../node_modules/bootstrap/scss/mixins.scss';
 @import '../../node_modules/bootstrap/scss/variables.scss';
+
+@mixin word-wrap() {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}

yarn.lock

@@ -1038,9 +1038,9 @@ boom@5.x.x:
   dependencies:
     hoek "4.x.x"
 
-bootstrap@^4.0.0:
+bootstrap@4.1.1:
-  version "4.0.0"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.0.0.tgz#ceb03842c145fcc1b9b4e15da2a05656ba68469a"
+  resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-4.1.1.tgz#3aec85000fa619085da8d2e4983dfd67cf2114cb"
 
 boxen@^1.2.1:
   version "1.3.0"