dashboard: fix notifications

It seems Bootstrap 4.2 doesn't align the dropdown in the good way

circle/dashboard/static/dashboard/dashboard.css

@@ -364,9 +364,11 @@ a.hover-black {
   display: block;
 }
 
-.notification-messages {
+#notification-messages {
   padding: 10px 8px;
   width: 350px;
+  right: 0;
+  left: auto;
 }
 
 .notification-message {
@@ -375,7 +377,7 @@ a.hover-black {
   border-bottom: 1px dotted #D3D3D3;
 }
 
-.notification-messages .notification-message:last-child {
+#notification-messages .notification-message:last-child {
   margin-bottom: 0px;
   padding: 0px;
   border-bottom: none;
@@ -390,6 +392,15 @@ a.hover-black {
   cursor: pointer;
 }
 
+#notification-button a.dropdown-toggle {
+  color: white;
+  font-size: 12px;
+}
+
+#notification-button {
+  margin-right: 15px;
+}
+
 #vm-migrate-node-list {
   list-style: none;
 }

circle/dashboard/static/dashboard/dashboard.js

@@ -372,7 +372,7 @@ $(function () {
   });
 
   /* don't close notifications window on missclick */
-  $(document).on("click", ".notification-messages", function(e) {
+  $(document).on("click", "#notification-messages", function(e) {
     if($(e.target).closest("a").length)
       return true;
     else
@@ -380,7 +380,7 @@ $(function () {
   });
 
   $("#notification-button a").click(function() {
-    $('.notification-messages').load("/dashboard/notifications/");
+    $('#notification-messages').load("/dashboard/notifications/");
     $('#notification-button a span[class*="badge-pulse"]').remove();
   });
   

circle/dashboard/templates/dashboard/base.html

@@ -16,14 +16,14 @@
 {% if user.is_authenticated and user.pk and not request.token_user %}
   <ul class="nav navbar-nav pull-right">
     <li class="dropdown" id="notification-button">
-      <a href="{% url "dashboard.views.notifications" %}" style="color: white; font-size: 12px;"
+      <a href="{% url "dashboard.views.notifications" %}"
         class="dropdown-toggle" data-toggle="dropdown">
         {% trans "Notifications" %}
         {% if NEW_NOTIFICATIONS_COUNT > 0 %}
           <span class="badge badge-pulse">{{ NEW_NOTIFICATIONS_COUNT }}</span>
         {% endif %}
       </a>
-      <ul class="dropdown-menu notification-messages">
+      <ul class="dropdown-menu" id="notification-messages">
           <li>{% trans "Loading..." %}</li>
       </ul>
     </li>