Style mentions as pills in rich text editor (#10448)

Author: artcodespace

Diff for: res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -101,9 +101,37 @@ limitations under the License.
             }
         }
 
-        /* this selector represents what will become a pill */
+        /* this selector represents what will become a pill
+        nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
+        in the current composer, there don't appear to be any styles associated with those classes
+        in this repo */
         a[data-mention-type] {
-            cursor: text;
+            /* these entries duplicate mx_Pill from _Pill.pcss */
+            padding: $font-1px 0.4em;
+            line-height: $font-17px;
+            border-radius: $font-16px;
+            vertical-align: text-top;
+            /* TODO turning this on hides the cursor from the composer for some 
+            reason, so comment out for now and assess if it's needed when we add
+            the Avatars 
+            display: inline-flex; 
+            align-items: center; not required with the above turned off 
+            
+            Potential fix is using display: inline, width: fit-content
+            */
+            box-sizing: border-box;
+            max-width: 100%;
+            overflow: hidden;
+
+            color: $accent-fg-color;
+            background-color: $pill-bg-color;
+
+            /* combining the overrides from _BasicMessageComposer.pcss */
+            user-select: all;
+            position: relative;
+            cursor: unset; /* We don't want indicate clickability */
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }