[web] Fix notification block for long messages

When long messages have to be displayed, their text no longer goes beyond the frame.

web-src/src/components/NotificationList.vue

@@ -1,18 +1,15 @@
 <template>
-  <section v-if="notifications.length > 0" class="fd-notifications">
+  <section v-if="notifications.length > 0" class="notifications">
     <div class="columns is-centered">
       <div class="column is-half">
         <div
           v-for="notification in notifications"
           :key="notification.id"
           class="notification"
-          :class="[
+          :class="notification.type ? `is-${notification.type}` : ''"
-            'notification',
-            notification.type ? `is-${notification.type}` : ''
-          ]"
         >
           <button class="delete" @click="remove(notification)" />
-          <span v-text="notification.text" />
+          <div class="text" v-text="notification.text" />
         </div>
       </div>
     </div>
@@ -24,11 +21,6 @@ import * as types from '@/store/mutation_types'
 
 export default {
   name: 'NotificationList',
-  components: {},
-
-  data() {
-    return { showNav: false }
-  },
 
   computed: {
     notifications() {
@@ -44,19 +36,21 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
-.fd-notifications {
+.notifications {
   position: fixed;
-  bottom: 60px;
+  bottom: 4rem;
   z-index: 20000;
   width: 100%;
 }
-.fd-notifications .notification {
+.notifications .notification {
-  margin-bottom: 10px;
-  margin-left: 24px;
-  margin-right: 24px;
   box-shadow:
     0 4px 8px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
+.notification .text {
+  overflow-wrap: break-word;
+  max-height: 6rem;
+  overflow: scroll;
+}
 </style>