FIX: Show title on results of all poll types (#11041)

Previously, the title was shown only with pie chart results. Issue originally reported in https://meta.discourse.org/t/keep-the-heading-visible-when-showing-poll-results/167585

Also includes:
UX: Move the "Show breakdown" button (Display it with other poll buttons at the bottom)
FIX: Show the breakdown button only on any votes

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -347,12 +347,20 @@ createWidget("discourse-poll-container", {
     const options = poll.get("options");
 
     if (attrs.showResults) {
+      const contents = [];
+
+      if (attrs.titleHTML) {
+        contents.push(new RawHtml({ html: attrs.titleHTML }));
+      }
+
       const type = poll.get("type") === "number" ? "number" : "standard";
       const resultsWidget =
         type === "number" || attrs.poll.chart_type !== PIE_CHART_TYPE
           ? `discourse-poll-${type}-results`
           : "discourse-poll-pie-chart";
-      return this.attach(resultsWidget, attrs);
+      contents.push(this.attach(resultsWidget, attrs));
+
+      return contents;
     } else if (options) {
       const contents = [];
 
@@ -495,6 +503,7 @@ createWidget("discourse-poll-pie-canvas", {
 
 createWidget("discourse-poll-pie-chart", {
   tagName: "div.poll-results-chart",
+
   html(attrs) {
     const contents = [];
 
@@ -503,20 +512,6 @@ createWidget("discourse-poll-pie-chart", {
       return contents;
     }
 
-    if (attrs.groupableUserFields.length) {
-      const button = this.attach("button", {
-        className: "btn-default poll-show-breakdown",
-        label: "poll.group-results.label",
-        title: "poll.group-results.title",
-        icon: "far-eye",
-        action: "showBreakdown",
-      });
-
-      contents.push(button);
-    }
-
-    contents.push(new RawHtml({ html: attrs.titleHTML }));
-
     const chart = this.attach("discourse-poll-pie-canvas", attrs);
     contents.push(chart);
 
@@ -626,6 +621,18 @@ createWidget("discourse-poll-buttons", {
       }
     }
 
+    if (attrs.groupableUserFields.length && poll.voters > 0) {
+      const button = this.attach("button", {
+        className: "btn-default poll-show-breakdown",
+        label: "poll.group-results.label",
+        title: "poll.group-results.title",
+        icon: "far-eye",
+        action: "showBreakdown",
+      });
+
+      contents.push(button);
+    }
+
     if (isAdmin && dataExplorerEnabled && poll.voters > 0 && exportQueryID) {
       contents.push(
         this.attach("button", {

plugins/poll/assets/stylesheets/common/poll.scss

@@ -128,7 +128,7 @@ div.poll {
 
   .pie-chart-legends {
     text-align: center;
-    margin: 10px 0;
+    margin-top: 0.5em;
 
     .legend {
       display: inline-block;
@@ -149,7 +149,6 @@ div.poll {
   }
 
   .poll-results-chart {
-    height: 340px;
     overflow-y: auto;
     overflow-x: hidden;
   }

plugins/poll/assets/stylesheets/desktop/poll.scss

@@ -30,6 +30,7 @@ div.poll {
 
   .poll-title {
     border-bottom: 1px solid var(--primary-low);
+    margin-bottom: 0.5em;
     padding: 0.5em 0;
   }