From c6b1fffcd79f8eac8e09660957b4602931a50128 Mon Sep 17 00:00:00 2001
From: Matthew Fuller <mf4192@att.com>
Date: Tue, 23 Jun 2020 10:46:18 -0700
Subject: [PATCH] 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 |  2 ++
 web/style.css    | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/js/common.js b/web/js/common.js
index aad4ea4..cae7e5a 100755
--- a/web/js/common.js
+++ b/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");
diff --git a/web/style.css b/web/style.css
index 10ae7e3..58f3bf9 100644
--- a/web/style.css
+++ b/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%;
 }