Increase gap between ELS and the subsequent event to prevent overlap (#…

…7391)
matrix-org · Dec 17, 2021 · 818465a · 818465a
1 parent 39c4b78
commit 818465a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
@@ -401,6 +401,11 @@ limitations under the License.
     }
 }
 
+// increase margin between ELS and the next Event to not have our user avatar overlap the expand/collapse button
+.mx_EventListSummary[data-layout=bubble][data-expanded=false] + .mx_EventTile[data-layout=bubble][data-self=true] {
+    margin-top: 20px;
+}
+
 /* events that do not require bubble layout */
 .mx_EventListSummary[data-layout=bubble],
 .mx_EventTile.mx_EventTile_bad[data-layout=bubble] {

diff --git a/src/components/views/elements/MemberEventListSummary.tsx b/src/components/views/elements/MemberEventListSummary.tsx
@@ -90,14 +90,15 @@ export default class MemberEventListSummary extends React.Component<IProps> {
         layout: Layout.Group,
     };
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps: IProps): boolean {
         // Update if
         //  - The number of summarised events has changed
         //  - or if the summary is about to toggle to become collapsed
         //  - or if there are fewEvents, meaning the child eventTiles are shown as-is
         return (
             nextProps.events.length !== this.props.events.length ||
-            nextProps.events.length < this.props.threshold
+            nextProps.events.length < this.props.threshold ||
+            nextProps.layout !== this.props.layout
         );
     }