--- a/mail/base/content/mailWidgets.js
+++ b/mail/base/content/mailWidgets.js
@@ -129,17 +129,17 @@
     addNewsgroupView(aNewsgroup) {
       this.mNewsgroups.push(aNewsgroup);
     }
 
     buildViews() {
       for (let i = 0; i < this.mNewsgroups.length; i++) {
         const newNode = document.createXULElement("mail-newsgroup");
         if (i > 0) {
-          const textNode = document.createXULElement("text");
+          const textNode = document.createXULElement("label");
           textNode.setAttribute("value", ",");
           textNode.setAttribute("class", "newsgroupSeparator");
           this.appendChild(textNode);
         }
 
         newNode.textContent = this.mNewsgroups[i];
         newNode.setAttribute("newsgroup", this.mNewsgroups[i]);
         this.appendChild(newNode);
@@ -269,17 +269,17 @@
             i + 1,
             this.mMessageIds[i],
             this.mMessageIds.length
           );
         } else {
           let newMessageIdNode = document.createXULElement("mail-messageid");
 
           if (i > 0) {
-            let textNode = document.createXULElement("text");
+            let textNode = document.createXULElement("label");
             textNode.setAttribute("value", ", ");
             textNode.setAttribute("class", "messageIdSeparator");
             this.headerValue.appendChild(textNode);
           }
           let itemInDocument = this.headerValue.appendChild(newMessageIdNode);
           this._updateMessageIdNode(
             itemInDocument,
             i + 1,
@@ -1110,17 +1110,17 @@
     }
 
     /**
      * Append a comma after the (currently) final (email address, we hope!) node of
      * this.emailAddresses.
      */
     appendComma() {
       // Create and append a comma.
-      let commaNode = document.createXULElement("text");
+      let commaNode = document.createXULElement("label");
       commaNode.setAttribute("value", ",");
       commaNode.setAttribute("class", "emailSeparator");
       this.emailAddresses.appendChild(commaNode);
     }
 
     /**
      * Add a (N more) widget which can be clicked to reveal the rest.
      */

--- a/mail/themes/shared/mail/messageHeader.css
+++ b/mail/themes/shared/mail/messageHeader.css
@@ -205,28 +205,34 @@ mail-emailaddress[selected="true"] > .em
   color: HighlightText;
   background-color: Highlight;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 /* this is for the comma in between email addresses */
 .emailSeparator {
+  margin: 0;
   margin-inline-start: -3px; /* squeeze it inside the bubble, by the star */
 }
 
 /* Because there's no star for newsgroups like there is for email addresses,
  * pushing it back the same number of pixels as emailSeparator causes
  * the comma to be drawn too close to the last letter, which looks bad, so
  * using a separate rule here.
  */
 .newsgroupSeparator {
+  margin: 0;
   margin-inline-start: -2px;
 }
 
+.messageIdSeparator {
+  margin: 0;
+}
+
 .emailStar {
   width: 1em;
   height: 1em;
   margin-inline-start: 2px;
   list-style-image: url("chrome://messenger/skin/icons/star.svg");
   -moz-context-properties: fill;
   fill: currentColor;
 }