Make the pill text single line (#8744)

res/css/views/elements/_Pill.scss

@@ -21,7 +21,9 @@ limitations under the License.
     vertical-align: text-top;
     display: inline-flex;
     align-items: center;
-
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
     cursor: pointer;
 
     color: $accent-fg-color !important; // To override .markdown-body
@@ -50,6 +52,13 @@ limitations under the License.
     .mx_BaseAvatar {
         margin-inline-start: -0.3em; // Otherwise the gap is too large
         margin-inline-end: 0.2em;
+        min-width: $font-16px; // ensure the avatar is not compressed
+    }
+
+    .mx_Pill_linkText {
+        white-space: nowrap; // enforce the pill text to be a single line
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     a& {

res/css/views/elements/_ReplyChain.scss

@@ -24,6 +24,7 @@ limitations under the License.
         &.mx_AccessibleButton_kind_link_inline {
             padding: 0;
             color: unset;
+            white-space: nowrap; // Enforce 'In reply to' to be a single line
 
             &:hover {
                 color: $links;

res/css/views/rooms/_BasicMessageComposer.scss

@@ -57,6 +57,10 @@ limitations under the License.
                 user-select: all;
                 position: relative;
                 cursor: unset; // We don't want indicate clickability
+                display: inline-block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
 
                 &:hover {
                     // We don't want indicate clickability | To override the overriding of .markdown-body
@@ -65,8 +69,10 @@ limitations under the License.
 
                 // avatar psuedo element
                 &::before {
+                    display: inline-block;
                     content: var(--avatar-letter);
                     width: $font-16px;
+                    min-width: $font-16px; // ensure the avatar is not compressed
                     height: $font-16px;
                     margin-inline-end: 0.24rem;
                     background: var(--avatar-background), $background;

src/components/views/elements/Pill.tsx

@@ -264,18 +264,20 @@ export default class Pill extends React.Component<IProps, IState> {
                         onClick={onClick}
                         onMouseOver={this.onMouseOver}
                         onMouseLeave={this.onMouseLeave}
+                        dir="auto"
                     >
                         { avatar }
-                        { linkText }
+                        <span className="mx_Pill_linkText">{ linkText }</span>
                         { tip }
                     </a> :
                     <span
                         className={classes}
                         onMouseOver={this.onMouseOver}
                         onMouseLeave={this.onMouseLeave}
+                        dir="auto"
                     >
                         { avatar }
-                        { linkText }
+                        <span className="mx_Pill_linkText">{ linkText }</span>
                         { tip }
                     </span> }
             </MatrixClientContext.Provider>;

test/components/views/messages/TextualBody-test.tsx

@@ -331,11 +331,11 @@ describe("<TextualBody />", () => {
                 '<span class="mx_EventTile_body markdown-body" dir="auto">' +
                 'A <span><a class="mx_Pill mx_RoomPill" ' +
                 'href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com' +
-                '?via=example.com&amp;via=bob.com"' +
+                '?via=example.com&amp;via=bob.com" dir="auto"' +
                 '><img class="mx_BaseAvatar mx_BaseAvatar_image" ' +
                 'src="mxc://avatar.url/room.png" ' +
                 'style="width: 16px; height: 16px;" alt="" aria-hidden="true">' +
-                'room name</a></span> with vias</span>',
+                '<span class="mx_Pill_linkText">room name</span></a></span> with vias</span>',
             );
         });
 
@@ -425,4 +425,3 @@ describe("<TextualBody />", () => {
         });
     });
 });
-

test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

@@ -14,4 +14,4 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
 </span>"
 `;
 
-exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><a class=\\"mx_Pill mx_UserPill\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\">Member</a></span></span>"`;
+exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"<span class=\\"mx_EventTile_body markdown-body\\" dir=\\"auto\\">Hey <span><a class=\\"mx_Pill mx_UserPill\\" dir=\\"auto\\"><img class=\\"mx_BaseAvatar mx_BaseAvatar_image\\" src=\\"mxc://avatar.url/image.png\\" style=\\"width: 16px; height: 16px;\\" alt=\\"\\" aria-hidden=\\"true\\"><span class=\\"mx_Pill_linkText\\">Member</span></a></span></span>"`;