diff --git a/css/styles.css b/css/styles.css
index fcb3708b1..26a8c42b2 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,12 +1,3 @@
-.notification {
-	display: block;
-	padding: 16px 12px;
-	line-height: 1em;
-}
-.notification:not(:last-child) {
-	border-bottom: 1px solid rgb(238, 238, 238);
-}
-
 .notification-container {
 	background-color: #fff;
 	display: none;
@@ -18,7 +9,8 @@
 	min-height: 100px;
 	max-height: 260px;
 	border-radius: 0 0 3px 3px;
-	border: 1px solid rgb(238, 238, 238);
+	overflow: hidden;
+	overflow-y: auto;
 }
 
 .notification-container .emptycontent h2 {
@@ -27,35 +19,22 @@
 }
 
 .notification {
-	color: black;
-	position: relative;
-	clear: both;
+	padding-bottom: 12px;
 }
 
-img.notification-icon {
-	width: 32px;
-	height: 32px;
-	display: block;
+.notification:not(:last-child) {
+	border-bottom: 1px solid rgb(238, 238, 238);
 }
 
-/**
- * Vertical alignment from http://stackoverflow.com/a/39923209
- */
+.notification-heading,
 .notification-subject {
-	padding-top: 12px;
-	position: relative;
-}
-
-.notification-subject a {
-	display: inline-block;
+	display: flex;
 }
 
-.notification-subject > span.image,
-.notification-subject > span.text,
-.notification-subject > a > span.image,
-.notification-subject > a > span.text {
-	display:table-cell;
-	vertical-align:middle;
+img.notification-icon {
+	width: 32px;
+	height: 32px;
+	display: flex;
 }
 
 .notification-subject > span.text,
@@ -67,30 +46,22 @@ img.notification-icon {
 	color: #999;
 }
 
-.notification:hover > .notification-delete {
-	display: block !important;
-	position: absolute;
-	top: 7px;
-	right: 12px;
-	opacity: 0.3;
-}
-
-.notification-delete:hover {
-	opacity: 0.8 !important;
-	cursor: pointer;
+.notification-delete {
+	display: flex;
+	opacity: 0.5;
+	padding: 14px;
 }
 
-.notification-delete div, .notifications-button img {
+.notification-delete:hover,
+.notification-delete .icon-close,
+.notifications-button img {
+	opacity: 1;
 	cursor: pointer;
 }
 
 .notification-time {
-	text-align: right;
 	opacity: 0.5;
-	padding-right: 32px;
-	margin-top: -7px;
-	position: absolute;
-	right: 0;
+	margin: 13px 0 13px auto;
 }
 
 .notifications-button {
@@ -118,11 +89,11 @@ img.notification-icon {
 	margin: 0;
 }
 
+.notification-subject,
+.notification .notification-message,
+.notification .notification-full-message,
 .notification .notification-actions {
-	padding: 0;
-	display: inline-block;
-	width: 100%;
-	margin: -6px 0;
+	margin: 0 12px 12px;
 }
 
 .notification .notification-actions .action-button.primary {
@@ -133,14 +104,9 @@ img.notification-icon {
 	margin-left: auto;
 }
 
-.notification .notification-subject {
-	margin-right: 20px;
-}
-
 .notification .notification-message,
 .notification .notification-full-message {
 	line-height: 20px;
-	padding-bottom: 16px;
 	opacity: .57;
 }
 
@@ -158,8 +124,7 @@ img.notification-icon {
 	margin: 0 5px 2px 3px;
 }
 
-.notification strong,
-.notification .notification-subject a:not(.full-subject-link) {
+.notification strong {
 	font-weight: bold;
 	opacity: 1;
 }
@@ -170,10 +135,8 @@ img.notification-icon {
 }
 
 .notification-wrapper {
-	max-height: 260px;
-	overflow: hidden;
-	overflow-y: auto;
-	margin-right: 3px;
+	display: flex;
+	flex-direction: column;
 }
 
 .notifications .emptycontent {
diff --git a/js/app.js b/js/app.js
index 912bb37ee..f426b0a89 100644
--- a/js/app.js
+++ b/js/app.js
@@ -52,31 +52,31 @@
 		/** @type {string} */
 		_notificationTemplate: '' +
 		'<div class="notification" data-id="{{notification_id}}" data-timestamp="{{timestamp}}">' +
-		'  <span class="notification-time has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{absoluteDate}}">{{relativeDate}}</span>' +
-		'  {{#if link}}' +
-		'    <div class="notification-subject">' +
-		'      <a href="{{link}}" class="full-subject-link">' +
-		'        {{#if icon}}<span class="image"><img src="{{icon}}" class="notification-icon"></span>{{/if}}' +
-		'        <span class="text">{{{subject}}}</span>' +
-		'      </a>' +
+		'  <div class="notification-heading">' +
+		'    <span class="notification-time has-tooltip live-relative-timestamp" data-timestamp="{{timestamp}}" title="{{absoluteDate}}">{{relativeDate}}</span>' +
+		'    <div class="notification-delete">' +
+		'      <span class="icon icon-close svg" title="' + t('notifications', 'Dismiss') + '"></span>' +
 		'    </div>' +
+		'  </div>' +
+		'  {{#if link}}' +
+		'    <a href="{{link}}" class="notification-subject full-subject-link">' +
+		'      {{#if icon}}<span class="image"><img src="{{icon}}" class="notification-icon"></span>{{/if}}' +
+		'      <span class="text">{{{subject}}}</span>' +
+		'    </a>' +
 		'  {{else}}' +
 		'    <div class="notification-subject">' +
 		'        {{#if icon}}<span class="image"><img src="{{icon}}" class="notification-icon"></span>{{/if}}' +
 		'        <span class="text">{{{subject}}}</span>' +
 		'    </div>' +
 		'  {{/if}}' +
-		'  <div class="notification-message">{{{message}}}</div>' +
+		'  {{#if message}}<div class="notification-message">{{{message}}}</div>{{/if}}' +
 		'  <div class="notification-full-message hidden">{{{full_message}}}</div>' +
-		'  <div class="notification-actions">' +
+		'  {{#if actions}}<div class="notification-actions">' +
 		'    {{#each actions}}' +
 		'      <button class="action-button pull-right{{#if this.primary}} primary{{/if}}" data-type="{{this.type}}" ' +
 		'data-href="{{this.link}}">{{this.label}}</button>' +
 		'    {{/each}}' +
-		'  </div>' +
-		'  <div style="display: none;" class="notification-delete">' +
-		'    <div class="icon icon-close svg" title="' + t('notifications', 'Dismiss') + '"></div>' +
-		'  </div>' +
+		'  </div>{{/if}}' +
 		'</div>',
 
 		/**