mirror of https://github.com/vector-im/riot-web
Fix reactions row overflow and gap between reactions (#8813)
parent
3b28b1100f
commit
43f2ee4283
|
@ -17,14 +17,11 @@ limitations under the License.
|
|||
.mx_ReactionsRowButton {
|
||||
display: inline-flex;
|
||||
line-height: $font-20px;
|
||||
margin-right: 6px;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid $message-action-bar-border-color;
|
||||
border-radius: 10px;
|
||||
background-color: $header-panel-bg-color;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
border-color: $reaction-row-button-hover-border-color;
|
||||
|
|
|
@ -60,10 +60,7 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
padding: 0;
|
||||
|
||||
// See margin setting of ReactionsRow on _EventTile.scss
|
||||
margin-right: 8px;
|
||||
margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
|
||||
}
|
||||
|
||||
.mx_ThreadSummary {
|
||||
|
|
|
@ -55,6 +55,8 @@ limitations under the License.
|
|||
.mx_EventTile[data-layout=bubble] {
|
||||
--EventTile_bubble-margin-inline-start: 49px;
|
||||
--EventTile_bubble-margin-inline-end: 60px;
|
||||
--EventTile_bubble_line-margin-inline-start: -9px;
|
||||
--EventTile_bubble_line-margin-inline-end: -12px;
|
||||
--EventTile_bubble_gap-inline: 5px;
|
||||
|
||||
position: relative;
|
||||
|
@ -177,6 +179,10 @@ limitations under the License.
|
|||
border-color: $quinary-content;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
|
||||
}
|
||||
|
||||
&[data-self=false] {
|
||||
.mx_EventTile_line {
|
||||
border-bottom-right-radius: var(--cornerRadius);
|
||||
|
@ -205,6 +211,10 @@ limitations under the License.
|
|||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
--backgroundColor: $eventbubble-others-bg;
|
||||
}
|
||||
|
||||
|
@ -242,13 +252,10 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
float: right;
|
||||
clear: right;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
/* Moving the "add reaction button" before the reactions */
|
||||
> :last-child {
|
||||
order: -1;
|
||||
order: -1; // Moving the "add reaction button" before the reactions
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -269,12 +276,11 @@ limitations under the License.
|
|||
}
|
||||
|
||||
.mx_EventTile_line {
|
||||
--EventTile_bubble_line-margin-inline-end: -12px;
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 5px var(--EventTile_bubble_gap-inline);
|
||||
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 -9px;
|
||||
margin-block: 0;
|
||||
margin-inline: var(--EventTile_bubble_line-margin-inline-start) var(--EventTile_bubble_line-margin-inline-end);
|
||||
border-top-left-radius: var(--cornerRadius);
|
||||
border-top-right-radius: var(--cornerRadius);
|
||||
|
||||
|
@ -481,11 +487,6 @@ limitations under the License.
|
|||
}
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
margin-right: -18px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
|
||||
&.mx_EventTile_bad {
|
||||
/* Special layout scenario for "Unable To Decrypt (UTD)" events */
|
||||
.mx_EventTile_line {
|
||||
|
|
|
@ -65,6 +65,13 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
align-items: center;
|
||||
gap: $spacing-4;
|
||||
}
|
||||
|
||||
&[data-layout=group] {
|
||||
> .mx_DisambiguatedProfile {
|
||||
line-height: $font-20px;
|
||||
|
@ -286,8 +293,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
}
|
||||
|
||||
.mx_ReactionsRow {
|
||||
margin: 0;
|
||||
padding: 4px 64px;
|
||||
margin: $spacing-4 64px;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -981,7 +987,7 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
|||
align-items: flex-end;
|
||||
|
||||
.mx_EventTile_line.mx_EventTile_mediaLine {
|
||||
margin: 0 var(--EventBubbleTile_line-margin-inline-end) 0 0; // align with normal messages
|
||||
margin: 0 var(--EventTile_bubble_line-margin-inline-end) 0 0; // align with normal messages
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue