diff --git a/res/css/views/rooms/_EventBubbleTile.scss b/res/css/views/rooms/_EventBubbleTile.scss
index ba5c3595f2..92daa223f7 100644
--- 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
index be39ceb6e5..69ab4a60f0 100644
--- 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
         );
     }