Fix cursor pointer on all gr-messages

Previously, the css rule was set for non-expanded messages to get cursor
pointer styling. There were two issues. The expanded attribute was not
on the host, and it was checking for 'expanded' rather than '_expanded'

This change adds a class to the host so that (updated) css styles can
be appropriately applied.

Bug: Issue 5808
Change-Id: Icb6fe2ac57e06e049d3222e855906b7f3419087f
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.html b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
index ca3c40e..831914e 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.html
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.html
@@ -30,10 +30,11 @@
         border-top: 1px solid #ddd;
         display: block;
         position: relative;
-      }
-      :host(:not([expanded])) {
         cursor: pointer;
       }
+      :host(.expanded) {
+        cursor: auto;
+      }
       gr-avatar {
         position: absolute;
         left: var(--default-horizontal-margin);
diff --git a/polygerrit-ui/app/elements/change/gr-message/gr-message.js b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
index cebaf5c..e782943 100644
--- a/polygerrit-ui/app/elements/change/gr-message/gr-message.js
+++ b/polygerrit-ui/app/elements/change/gr-message/gr-message.js
@@ -78,6 +78,10 @@
       },
     },
 
+    observers: [
+      '_updateExpandedClass(message.expanded)',
+    ],
+
     ready: function() {
       this.$.restAPI.getConfig().then(function(config) {
         this.config = config;
@@ -87,6 +91,14 @@
       }.bind(this));
     },
 
+    _updateExpandedClass: function(expanded) {
+      if (expanded) {
+        this.classList.add('expanded');
+      } else {
+        this.classList.remove('expanded');
+      }
+    },
+
     _computeAuthor: function(message) {
       return message.author || message.updated_by;
     },