style: fix display of banner in width

src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.html

 <div class="alert-wrapper">
   <div *ngIf="filesRetrieve(listDataFileObs | async) && !canSubmit(listDataFileObs | async)"
-       class="alert"
+       class="alert warn"
   >
     {{message| translate}}
   </div>

src/app/features/deposit/components/routables/deposit-detail/deposit-detail.routable.scss

@@ -2,63 +2,80 @@
 @import "../../../../../../sass/abstracts/mixins";
 @import "../../../../../shared/components/routables/shared-abstract-detail/shared-abstract-detail.routable.scss";
 
+$height-alert: 30px;
+
 :host {
-  .tab-header-icon {
+  $padding-top: $height-alert + 10px;
+  padding-top: $padding-top;
+
+  @include respond-to-breakpoint("xs") {
+    $padding-top: $height-alert + 10px + 20px;
+    padding-top: $padding-top;
   }
 
-  .tab-header-label {
-    padding-left: 10px;
+  .alert-wrapper {
+    height: $height-alert;
+    padding-bottom: 10px;
+    top: 0;
+    width: 100vw;
+    position: absolute;
+    right: 0;
 
-    @include respond-to-breakpoint("xs") {
-      display: none;
-    }
-  }
-}
+    .alert {
+      color: $white;
+      font-weight: bold;
+      text-align: center;
+      padding: 5px 10px;
+      box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
+      animation: appear 0.25s;
 
-.alert-wrapper {
-  height: 30px;
-  padding-bottom: 10px;
-  margin: -25px -25px 0;
+      &.warn {
+        background-color: $warning;
+      }
 
-  .alert {
-    background-color: $warning;
-    color: $white;
-    font-weight: bold;
-    text-align: center;
-    padding: 5px;
-    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.05);
-    animation: appear 0.25s;
+      &.error {
+        background-color: $red;
+      }
 
-    &.error {
-      background-color: $red;
-    }
+      &.success {
+        background-color: $success;
+      }
 
-    &.success {
-      background-color: $success;
+      &.info {
+        background-color: $info;
+      }
     }
 
-    &.info {
-      background-color: $info;
+    @-webkit-keyframes appear {
+      0% {
+        -webkit-transform: scaleY(0);
+        height: 0;
+        padding: 0;
+        opacity: 0;
+        display: none;
+        -webkit-animation-play-state: paused;
+      }
+      100% {
+        -webkit-transform: scaleY(1);
+        opacity: 1;
+      }
     }
   }
-}
 
-.success {
-  background-color: $green !important;
-  color: $white !important;;
-}
+  .tab-header-icon {
+  }
+
+  .tab-header-label {
+    padding-left: 10px;
 
-@-webkit-keyframes appear {
-  0% {
-    -webkit-transform: scaleY(0);
-    height: 0;
-    padding: 0;
-    opacity: 0;
-    display: none;
-    -webkit-animation-play-state: paused;
+    @include respond-to-breakpoint("xs") {
+      display: none;
+    }
   }
-  100% {
-    -webkit-transform: scaleY(1);
-    opacity: 1;
+
+  button.success {
+    background-color: $green !important;
+    color: $white !important;;
   }
 }
+