Fix notification with large message

4 files changed, 26 insertions, 23 deletions

diff --git a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
index 0374b70ef..e862d5162 100644
--- a/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
+++ b/client/src/app/+admin/moderation/video-abuse-list/video-abuse-list.component.html
@@ -41,7 +41,7 @@
       </td>
 
       <td class="action-cell">
-        <my-action-dropdown i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
+        <my-action-dropdown placement="bottom-right" i18n-label label="Actions" [actions]="videoAbuseActions" [entry]="videoAbuse"></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
@@ -62,4 +62,4 @@
   </ng-template>
 </p-table>
 
-<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
\ No newline at end of file
+<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
diff --git a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
index ff4543b97..7cef787d2 100644
--- a/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
+++ b/client/src/app/+admin/moderation/video-blacklist-list/video-blacklist-list.component.html
@@ -30,7 +30,7 @@
       <td>{{ videoBlacklist.createdAt }}</td>
 
       <td class="action-cell">
-        <my-action-dropdown i18n-label label="Actions" [actions]="videoBlacklistActions" [entry]="videoBlacklist"></my-action-dropdown>
+        <my-action-dropdown i18n-label  placement="bottom-right" label="Actions" [actions]="videoBlacklistActions" [entry]="videoBlacklist"></my-action-dropdown>
       </td>
     </tr>
   </ng-template>
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index 0489c9558..3a60139e1 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -40,13 +40,15 @@
 <my-confirm></my-confirm>
 <p-toast position="bottom-right">
   <ng-template let-message pTemplate="message">
-    <div class="message">
-      <h3>{{ message.summary }}</h3>
-      <p>{{ message.detail }}</p>
-    </div>
+    <div class="notification-block">
+      <div class="message">
+        <h3>{{ message.summary }}</h3>
+        <p>{{ message.detail }}</p>
+      </div>
 
-    <span *ngIf="message.severity === 'success'" class="glyphicon glyphicon-ok"></span>
-    <span *ngIf="message.severity === 'info'" class="glyphicon glyphicon-info-sign"></span>
-    <span *ngIf="message.severity === 'error'" class="glyphicon glyphicon-remove"></span>
+      <span *ngIf="message.severity === 'success'" class="glyphicon glyphicon-ok"></span>
+      <span *ngIf="message.severity === 'info'" class="glyphicon glyphicon-info-sign"></span>
+      <span *ngIf="message.severity === 'error'" class="glyphicon glyphicon-remove"></span>
+    </div>
   </ng-template>
 </p-toast>
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 21452fa16..8b3e0b813 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -324,23 +324,24 @@ p-toast {
       background-color: #03A9F4 !important;
     }
 
-    .message {
-      float: left;
+    .notification-block {
+      display: flex;
 
-      h3 {
-        font-size: 21px;
-      }
+      .message {
+        h3 {
+          font-size: 21px;
+        }
 
-      p {
-        font-size: 15px;
+        p {
+          font-size: 15px;
+        }
       }
-    }
 
-    .glyphicon {
-      float: right;
-      font-size: 32px;
-      margin-top: 15px;
-      margin-right: 5px;
+      .glyphicon {
+        font-size: 32px;
+        margin-top: 15px;
+        margin-right: 5px;
+      }
     }
   }
 }