PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix MAB overlapping or overflowing in bubbles layout and threads regressions (#7569)

Browse source 
* Fix MAB overlapping or overflowing in bubbles layout

* Fix bubbles in threads timestamps positioning regression
This commit is contained in:
Michael Telatynski 2022-01-19 01:48:07 +00:00 committed by GitHub
parent 1d45921d14
commit b50060bcfc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -131,6 +131,10 @@ limitations under the License.
left: -34px; left: -34px;
} }
.mx_MessageActionBar {
right: -100px; // to make sure it doesn't overflow to the left or cover sender profile
}
--backgroundColor: $eventbubble-others-bg; --backgroundColor: $eventbubble-others-bg;
} }
@ -194,7 +198,10 @@ limitations under the License.
border-top-left-radius: var(--cornerRadius); border-top-left-radius: var(--cornerRadius);
border-top-right-radius: var(--cornerRadius); border-top-right-radius: var(--cornerRadius);
> a { // timestamp wrapper anchor // the selector here is quite weird because timestamps can appear linked & unlinked and in different places
// in the DOM depending on the specific rendering context
> a, // timestamp wrapper anchor
.mx_MessageActionBar + .mx_MessageTimestamp {
position: absolute; position: absolute;
padding: 4px 8px; padding: 4px 8px;
bottom: 0; bottom: 0;
@ -223,7 +230,8 @@ limitations under the License.
} }
&.mx_EventTile_sticker { &.mx_EventTile_sticker {
> a { > a, // timestamp wrapper anchor
.mx_MessageActionBar + .mx_MessageTimestamp {
// position timestamps for stickers to the right of the un-bubbled sticker // position timestamps for stickers to the right of the un-bubbled sticker
right: unset; right: unset;
left: 100%; left: 100%;
@ -338,7 +346,8 @@ limitations under the License.
.mx_EventTile_reply { .mx_EventTile_reply {
max-width: 90%; max-width: 90%;
padding: 0; padding: 0;
> a { > a, // timestamp wrapper anchor
.mx_MessageActionBar + .mx_MessageTimestamp {
display: none !important; display: none !important;
} }
} }
@ -439,16 +448,19 @@ limitations under the License.
margin-left: 9px; margin-left: 9px;
} }
.mx_EventTile_line > a { // timestamp wrapper anchor .mx_EventTile_line {
> a, // timestamp wrapper anchor
.mx_MessageActionBar + .mx_MessageTimestamp {
right: auto; right: auto;
left: -77px; left: -77px;
bottom: unset; bottom: unset;
align-self: center; align-self: center;
.mx_MessageTimestamp { .mx_MessageTimestamp, &.mx_MessageTimestamp {
vertical-align: middle; vertical-align: middle;
} }
} }
}
} }
.mx_EventListSummary[data-layout=bubble] { .mx_EventListSummary[data-layout=bubble] {

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

@ -911,6 +911,12 @@ $left-gutter: 64px;
margin: 0 -13px 0 0; // align with normal messages margin: 0 -13px 0 0; // align with normal messages
} }
} }
&[data-self=false] {
.mx_MessageActionBar {
right: -60px; // smaller overlap, otherwise it'll overflow on the right
}
}
} }
.mx_EventTile[data-layout=group] { .mx_EventTile[data-layout=group] {