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

Fix layout regressions in message bubbles

Browse source
This commit is contained in:
Germain Souquet 2021-07-13 10:15:12 +02:00
parent 55896223aa
commit 1061cb0ffb
4 changed files with 40 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

44
res/css/views/rooms/_EventBubbleTile.scss
View file

@ -67,7 +67,7 @@ limitations under the License.
.mx_SenderProfile {
position: relative;
top: -2px;
left: calc(-1 * var(--gutterSize));
left: 2px;
}
&[data-self=false] {
@ -75,7 +75,7 @@ limitations under the License.
border-bottom-right-radius: var(--cornerRadius);
}
.mx_EventTile_avatar {
left: -48px;
left: -34px;
}
.mx_MessageActionBar {
@ -91,7 +91,7 @@ limitations under the License.
float: right;
> a {
left: auto;
right: -35px;
right: -48px;
}
}
.mx_SenderProfile {
@ -123,10 +123,10 @@ limitations under the License.
background: var(--backgroundColor);
display: flex;
gap: 5px;
margin: 0 -12px 0 -22px;
margin: 0 -12px 0 -9px;
> a {
position: absolute;
left: -35px;
left: -48px;
}
}
@ -167,6 +167,7 @@ limitations under the License.
margin: 0 calc(-1 * var(--gutterSize));
.mx_EventTile_reply {
max-width: 90%;
padding: 0;
> a {
display: none !important;
@ -186,6 +187,23 @@ limitations under the License.
}
}
.mx_EditMessageComposer_buttons {
position: static;
padding: 0;
margin: 0;
background: transparent;
}
.mx_ReactionsRow {
margin-right: -18px;
margin-left: -9px;
}
.mx_ReplyThread {
border-left-width: 2px;
border-left-color: $eventbubble-reply-color;
}
&.mx_EventTile_bubbleContainer,
&.mx_EventTile_info,
& ~ .mx_EventListSummary[data-expanded=false] {
@ -225,6 +243,19 @@ limitations under the License.
.mx_EventTile {
margin: 0 58px;
}
.mx_EventTile_line {
margin: 0 5px;
> a {
left: auto;
right: 0;
transform: translateX(calc(100% + 5px));
}
}
.mx_MessageActionBar {
transform: translate3d(50%, 0, 0);
}
}
/* events that do not require bubble layout */
@ -283,7 +314,6 @@ limitations under the License.
}
.mx_MTextBody {
/* 30px equates to the width of the timestamp */
max-width: calc(100% - 35px - var(--gutterSize));
max-width: 100%;
}
}