diff --git a/WebContent/WEB-INF/jsp/include/userComment.jsp b/WebContent/WEB-INF/jsp/include/userComment.jsp
index 49b3695655..58c41cda0b 100644
--- a/WebContent/WEB-INF/jsp/include/userComment.jsp
+++ b/WebContent/WEB-INF/jsp/include/userComment.jsp
@@ -30,19 +30,94 @@
   
   var commentTypeId;
   var commentReferenceId;
+
+  function ensureCommentDialog() {
+    var dlg = dojo.widget.byId && dojo.widget.byId("CommentDialog");
+    if (!dlg) {
+      try { dojo.widget.parse(); dlg = dojo.widget.byId && dojo.widget.byId("CommentDialog"); } catch(e) {}
+    }
+    return dlg;
+  }
+
+  function unhideCommentSource() {
+    var n = document.getElementById("CommentDialog");
+    if (!n) return n;
+    n.removeAttribute("hidden");
+    n.setAttribute("aria-hidden", "false");
+    n.style.visibility = "visible";
+    n.style.display = "";
+    n.style.float = "none";
+    return n;
+  }
+
+
+  function normalizeWrapper(dlg, srcNode) {
+    var w = (dlg && dlg.domNode) ? dlg.domNode : srcNode;
+    if (!w) return;
+
+    w.style.display = "block";
+    w.style.visibility = "visible";
+    w.style.opacity = "1";
+    w.style.position = "fixed";
+    w.style.top = "50%";
+    w.style.left = "50%";
+    w.style.transform = "translate(-50%, -50%)";
+    w.style.margin = "0";
+    w.style.zIndex = "20010";
+    w.style.overflow = "visible";
+  }
+
+  function normalizeUnderlay() {
+    var u = document.getElementById("dialogUnderlay");
+    if (!u) return;
+    u.style.position = "fixed";
+    u.style.top = "0"; u.style.left = "0"; u.style.right = "0"; u.style.bottom = "0";
+    u.style.width = "100%";
+    u.style.height = "100%";
+    u.style.zIndex = "20000";
+    u.style.display = "block";
+  }
+
+  function resetUnderlay() {
+    var u = document.getElementById("dialogUnderlay");
+    if (!u) return;
+    u.style.display = "none";
+    u.style.zIndex = "";
+    u.style.position = "";
+    u.style.top = "";
+    u.style.left = "";
+    u.style.right = "";
+    u.style.bottom = "";
+    u.style.width = "";
+    u.style.height = "";
+  }
+
   function openCommentDialog(typeId, referenceId) {
-      commentTypeId = typeId;
-      commentReferenceId = referenceId;
-      $set("commentText", "");
-      dojo.widget.byId("CommentDialog").show();
-      $("commentText").focus();
+    commentTypeId = typeId;
+    commentReferenceId = referenceId;
+
+    var ta = document.getElementById("commentText");
+    if (ta) ta.value = "";
+
+    var src = unhideCommentSource();
+    var dlg = ensureCommentDialog();
+    if (!dlg) return;
+
+    normalizeWrapper(dlg, src);
+    normalizeUnderlay();
+    if (dlg.show) dlg.show();
+    setTimeout(function(){
+      normalizeWrapper(dlg, src);
+      var ct = document.getElementById("commentText");
+      if (ct && ct.focus) try { ct.focus(); } catch(e){}
+    }, 0);
   }
   
   function saveComment() {
-      var comment = $get("commentText");
+      var comment = (document.getElementById("commentText") || {}).value || "";
       MiscDwr.addUserComment(commentTypeId, commentReferenceId, comment, saveCommentCB);
   }
-  
+
   function saveCommentCB(comment) {
       if (!comment)
           alert("<spring:message code="notes.enterComment"/>");
@@ -64,7 +139,9 @@
   }
   
   function closeCommentDialog() {
-      dojo.widget.byId("CommentDialog").hide();
+    var dlg = dojo.widget.byId && dojo.widget.byId("CommentDialog");
+    if (dlg && dlg.hide) dlg.hide();
+    resetUnderlay();
   }
 </script>
 <style type="text/css">
@@ -82,7 +159,10 @@
   }
 </style>
 
-<div dojoType="dialog" id="CommentDialog" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250">
+<div dojoType="dialog" id="CommentDialog" bgColor="white" bgOpacity="0.5" toggle="fade" toggleDuration="250"
+     style="display:none; visibility:hidden;"
+     aria-hidden="true"
+     hidden>
   <span class="smallTitle"><spring:message code="notes.addNote"/></span>
   <table>
     <tr>
diff --git a/WebContent/WEB-INF/jsp/views.jsp b/WebContent/WEB-INF/jsp/views.jsp
index 7065bfbb8c..8648ac4254 100644
--- a/WebContent/WEB-INF/jsp/views.jsp
+++ b/WebContent/WEB-INF/jsp/views.jsp
@@ -17,10 +17,12 @@
     along with this program.  If not, see http://www.gnu.org/licenses/.
 --%>
 <%@ include file="/WEB-INF/jsp/include/tech.jsp"%>
+<%@page import="com.serotonin.mango.vo.UserComment"%>
 <tag:page dwr="ViewDwr"
 	js="view,dygraphs/dygraph-dev,dygraph-extra,dygraphsSplineUtils,dygraphsCharts"
 	css="jQuery/plugins/jquery-ui/css/south-street/jquery-ui-1.10.3.custom.min,jQuery/plugins/datetimepicker/jquery-ui-timepicker-addon,jQuery/plugins/jpicker/css/jPicker-1.1.6.min" 
 	jqplugins="jquery-ui/js/jquery-ui-1.10.3.custom.min,jpicker/jpicker-1.1.6.min,datetimepicker/jquery-ui-timepicker-addon" >
+  <%@ include file="/WEB-INF/jsp/include/userComment.jsp" %>
   <script type="text/javascript" src="resources/wz_jsgraphics.js"></script>
   <script type="text/javascript" src="resources/shortcut.js"></script>
   <script type="text/javascript" src="resources/customClientScripts/customView.js"></script>
@@ -41,6 +43,16 @@
          .rowTableAlt {
              background-color: #DCDCDC;
          }
+		 .dojoDialog textarea,
+		 .dojoDialog input,
+		 .dojoDialog select,
+		 .commonDialog textarea,
+		 .commonDialog input,
+		 .commonDialog select {
+			 border: 1px solid var(--slts-color-primary) !important;
+			 background: #fff !important;
+			 box-shadow: none !important;
+		 }
     </style>
     <script type="text/javascript" src="resources/node_modules/sweetalert2/dist/sweetalert2.min.js"></script>
 
diff --git a/WebContent/WEB-INF/snippet/alarmList.jsp b/WebContent/WEB-INF/snippet/alarmList.jsp
index 1dcaa967ee..629da4547c 100644
--- a/WebContent/WEB-INF/snippet/alarmList.jsp
+++ b/WebContent/WEB-INF/snippet/alarmList.jsp
@@ -33,9 +33,28 @@
       	<c:if test="${!hideIdColumn}"><td align="center">${event.id}</td></c:if>
       	<c:if test="${!hideAlarmLevelColumn}"><td align="center"><tag:eventIcon event="${event}"/></td></c:if>
         <c:if test="${!hideTimestampColumn}"><td align="center">${sst:time(event.activeTimestamp)}</td></c:if>
-        <td onmouseover="this.style.whiteSpace='normal'" onmouseout="this.style.whiteSpace='nowrap'" style=" white-space: nowrap; max-width:100vh;">
-        <p style="margin:auto; overflow: hidden; text-overflow: ellipsis; font-weight: bold;"><sst:i18n message="${event.message}"/></p>
-        </td>
+          <td>
+              <table cellspacing="0" cellpadding="0" width="100%">
+                  <colgroup>
+                      <col />
+                      <col />
+                      <col style="width:1%" />
+                  </colgroup>
+
+                  <tr>
+                      <td colspan="2"><b><sst:i18n message="${event.message}"/></b></td>
+                      <td align="right">
+                          <tag:img png="comment_add" title="notes.addNote"
+                                   onclick="openCommentDialog(${applicationScope['constants.UserComment.TYPE_EVENT']}, ${event.id})"/>
+                      </td>
+                  </tr>
+
+                  <tbody id="eventComments${event.id}">
+                  <tag:comments comments="${event.eventComments}"/>
+                  </tbody>
+              </table>
+          </td>
+
         <c:if test="${!hideInactivityColumn}">
 	        <td>
 	          <c:choose>