mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix jumpy outgoing messages

Browse source
This commit is contained in:
Evan Hahn 2021-10-14 11:54:20 -05:00 • committed by GitHub
parent d0e8fbd5a6
commit d6a81331bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

35
stylesheets/_modules.scss
View file

@ -76,19 +76,9 @@
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
outline: none; outline: none;
margin-left: 16px;
max-width: 406px; margin-right: 16px;
.module-timeline--width-wide &,
.module-message-detail & {
max-width: 75%;
}
.module-timeline--width-medium & {
max-width: 480px;
}
} }
.module-message--expired { .module-message--expired {
@ -113,14 +103,9 @@
} }
} }
.module-message--incoming {
margin-left: 16px;
margin-right: auto;
}
.module-message--outgoing { .module-message--outgoing {
float: right; float: right;
margin-right: 16px; justify-content: flex-end;
margin-left: auto;
} }
.module-message__buttons { .module-message__buttons {
@ -333,6 +318,19 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: 306px;
.module-timeline--width-wide &,
.module-message-detail & {
// NOTE(evanhahn): I wanted this to be 66% of the timeline, but I could not make that
// work without introducing layout bugs for some message types. This constant,
// though not ideal, fixes those bugs.
max-width: 50vw;
}
.module-timeline--width-medium & {
max-width: 370px;
}
} }
.module-message__container { .module-message__container {
position: relative; position: relative;
@ -1086,6 +1084,7 @@
.module-message__metadata__date { .module-message__metadata__date {
@include font-caption; @include font-caption;
user-select: none; user-select: none;
white-space: nowrap;
@include light-theme { @include light-theme {
color: $color-white-alpha-80; color: $color-white-alpha-80;