diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ee036a9c8..29cd67752 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1210,6 +1210,13 @@ StButton.popup-menu-item:insensitive {
     padding-bottom: 8px;
 }
 
+.notification-unexpanded {
+    /* We want to force the actor at a specific size, irrespective
+       of its minimum and preferred size, so we override both */
+    min-height: 36px;
+    height: 36px;
+}
+
 /* We use row-span = 2 for the image cell, which prevents its height preferences to be
    taken into account during allocation, so its height ends up being limited by the height
    of the content in the other rows. To avoid showing a stretched image, we set the minimum
diff --git a/js/ui/messageTray.js b/js/ui/messageTray.js
index b9f190ad4..2a33a1c55 100644
--- a/js/ui/messageTray.js
+++ b/js/ui/messageTray.js
@@ -337,6 +337,7 @@ const Notification = new Lang.Class({
             }));
 
         this.actor = new St.Button({ accessible_role: Atk.Role.NOTIFICATION });
+        this.actor.add_style_class_name('notification-unexpanded');
         this.actor._delegate = this;
         this.actor.connect('clicked', Lang.bind(this, this._onClicked));
         this.actor.connect('destroy', Lang.bind(this, this._onDestroy));
@@ -852,6 +853,8 @@ const Notification = new Lang.Class({
 
     expand: function(animate) {
         this.expanded = true;
+        this.actor.remove_style_class_name('notification-unexpanded');
+
         // The banner is never shown when the title did not fit, so this
         // can be an if-else statement.
         if (!this._titleFitsInBannerMode) {
@@ -889,6 +892,8 @@ const Notification = new Lang.Class({
         // Restore banner opacity in case the notification is shown in the
         // banner mode again on update.
         this._bannerLabel.opacity = 255;
+        // Restore height requisition
+        this.actor.add_style_class_name('notification-unexpanded');
         this.emit('collapsed');
     },