Make alerts less disruptive

A small change to prevent alerts from disrupting the layout of page
elements. Alerts now hover over existing page content and will be
stacked along the right margin of the UI.

Change-Id: Ib02ac25e07ea256d79b896e07c299b8ada4fe4ad

web/js/common.js

@@ -184,6 +184,8 @@ function showDismissableAlert(alertLevel, msg, fade) { // eslint-disable-line no
     div.setAttribute("role", "alert");
     div.innerHTML = `<strong>${alertHeading}: </strong>${msg}`;
     div.style.opacity = "1";
+    div.style.width = "350px";
+    div.style.marginTop = "5px";
 
     // dismissable button
     let btn = document.createElement("button");

web/style.css

@@ -135,5 +135,14 @@
 .document-open::before {
   content: "\1F5CE";
   font-size: 1.5em;
-  color:darkcyan;"
+  color:darkcyan;
+}
+
+#alert-div {
+  position:absolute;
+  display:flex;
+  flex-direction:column;
+  right:10px;
+  padding:0px;
+  opacity:97%;
 }