imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make the pill text single line (#8744)

Browse source
This commit is contained in:
Suguru Hirahara 2022-06-19 09:56:37 +00:00 • committed by GitHub
parent a434402b41
commit b1e07e8ef0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 24 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

11
res/css/views/elements/_Pill.scss
View file

@ -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& {

1
res/css/views/elements/_ReplyChain.scss
View file

@ -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;

6
res/css/views/rooms/_BasicMessageComposer.scss
View file

@ -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;