WebUI: Fix notification area layout

The fix prevents blocking elements in the right side near notification area.
Notification area now has fixed width and it isn't offset.
Also notification icon is aligned to notification text.

Ticket: https://pagure.io/freeipa/issue/8120

Signed-off-by: Serhii Tsymbaliuk <stsymbal@redhat.com>
Reviewed-By: Armando Neto <abiagion@redhat.com>

install/ui/ipa.css

@@ -44,15 +44,17 @@ textarea[readonly] {
 .notification-area {
     position: fixed;
     left: 50%;
+    right: 50%;
     top: 15px;
 }
 
 .notification-area div {
     position: relative;
-    left: -50%;
+    margin-left: -200px;
+    margin-right: -200px;
     z-index: 20;
     word-wrap: break-word;
-    max-width: 500px;
+    max-width: 400px;
 }
 
 /* ---- Facet ---- */

install/ui/less/alerts.less

@@ -8,8 +8,8 @@
     > .fa, > .fa-layered {
         font-size: 20px;
         position: absolute;
-        left: 7px;
-        top: 7px;
+        left: 11px;
+        top: 11px;
     }
     .fa-info {
         color: #72767b;