composebox_typeahead: Replace parentheses around pronouns with comma.

Currently, we show pronouns inside parentheses just after name in
@-mention typeaheads.

This commit changes it by removing parentheses and adding comma if
more info is present after pronouns. The pronouns also have the same
styles as that of the user emails.

Fixes part of zulip#31245.

web/styles/typeahead.css

@@ -84,17 +84,22 @@
         }
     }
 
+    .pronouns,
     .autocomplete_secondary {
         align-self: end;
         opacity: 0.8;
         font-size: 85%;
-        flex: 1 1 0;
         overflow: hidden;
         text-overflow: ellipsis;
         position: relative;
         top: -1px;
     }
 
+    .autocomplete_secondary {
+        flex: 1 1 0;
+    }
+
+    .active .pronouns,
     .active .autocomplete_secondary {
         opacity: 1;
     }

web/templates/typeahead_list_item.hbs

@@ -26,7 +26,7 @@
         {{~/if~}}
     </strong>
     {{~#if has_pronouns}}
-        <span class="pronouns">({{pronouns}})</span>
+        <span class="pronouns">{{pronouns}}{{#if (or has_secondary_html has_secondary)}},{{/if}}</span>
     {{~/if}}
     {{~#if should_add_guest_user_indicator}}
         <i>({{t 'guest'}})</i>