Improve the visual balance of bubble layout (#9704)

matrix-org · Dec 3, 2022 · 2d9fa81 · 2d9fa81
1 parent 0358e03
commit 2d9fa81
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/res/css/views/rooms/_EventBubbleTile.pcss b/res/css/views/rooms/_EventBubbleTile.pcss
@@ -43,7 +43,9 @@ limitations under the License.
     --EventTile_bubble_gap-inline: 5px;
 
     position: relative;
-    margin-top: var(--gutterSize);
+    /* Other half of the gutter is provided by margin-bottom on the last tile
+    of the section */
+    margin-top: calc(var(--gutterSize) / 2);
     margin-left: var(--EventTile_bubble-margin-inline-start);
     font-size: $font-14px;
 

diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss
@@ -462,6 +462,11 @@ $left-gutter: 64px;
         &.mx_EventTile_continuation {
             margin-top: 2px;
         }
+        &.mx_EventTile_lastInSection {
+            /* Other half of the gutter is provided by margin-top on the first
+            tile of the section */
+            margin-bottom: calc(var(--gutterSize) / 2);
+        }
     }
 }