From 1c99569414b449a7d32317d553bebf8d26b3180d Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 2 Jun 2022 16:23:04 +0900 Subject: [PATCH 1/3] Enforce the pill text to be a single line Signed-off-by: Suguru Hirahara --- res/css/views/elements/_Pill.scss | 10 +++++++++- res/css/views/elements/_ReplyChain.scss | 1 + src/components/views/elements/Pill.tsx | 6 ++++-- test/components/views/messages/TextualBody-test.tsx | 5 ++--- .../messages/__snapshots__/TextualBody-test.tsx.snap | 2 +- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss index fa854b76628..29dd912ed0a 100644 --- a/res/css/views/elements/_Pill.scss +++ b/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 @@ -52,6 +54,12 @@ limitations under the License. margin-inline-end: 0.2em; } + .mx_Pill_linkText { + white-space: nowrap; // enforce the pill text to be a single line + overflow: hidden; + text-overflow: ellipsis; + } + a& { text-overflow: ellipsis; white-space: nowrap; diff --git a/res/css/views/elements/_ReplyChain.scss b/res/css/views/elements/_ReplyChain.scss index a949feaf739..5071fc70052 100644 --- a/res/css/views/elements/_ReplyChain.scss +++ b/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; diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index f344f894569..f87e7c020d9 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -264,18 +264,20 @@ export default class Pill extends React.Component { onClick={onClick} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} + dir="auto" > { avatar } - { linkText } + { linkText } { tip } : { avatar } - { linkText } + { linkText } { tip } } ; diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index ecb597695b8..23c9fa206a0 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -331,11 +331,11 @@ describe("", () => { '' + 'A ' + - 'room name with vias', + 'room name with vias', ); }); @@ -425,4 +425,3 @@ describe("", () => { }); }); }); - diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 2b6ba33cbc7..783f72a697b 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -14,4 +14,4 @@ exports[` renders formatted m.text correctly pills do not appear " `; -exports[` renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"Hey \\"\\"Member"`; +exports[` renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `"Hey \\"\\"Member"`; From 318826eca690185c7dcff1376d3ad718186b1494 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 14:30:54 +0900 Subject: [PATCH 2/3] Ensure the avatar is not compressed Signed-off-by: Suguru Hirahara --- res/css/views/elements/_Pill.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss index 29dd912ed0a..71111748e29 100644 --- a/res/css/views/elements/_Pill.scss +++ b/res/css/views/elements/_Pill.scss @@ -52,6 +52,7 @@ 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 { From 114b199f4ee1ea50064442705ef69015acc46c11 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sun, 19 Jun 2022 14:47:41 +0900 Subject: [PATCH 3/3] Ensure the pill on the message composer to be a single line Signed-off-by: Suguru Hirahara --- res/css/views/rooms/_BasicMessageComposer.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index ea9bcd1adf9..af919a2e63c 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/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;