Improve the visual balance of bubble layout (#9704)

robintown · web-flow · commit 2d9fa81cf596 · 2022-12-03T17:31:40.000-05:00
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);
+        }
     }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -462,6 +462,11 @@ $left-gutter: 64px;`
`462`	`462`	`&.mx_EventTile_continuation {`
`463`	`463`	`margin-top: 2px;`
`464`	`464`	`}`
	`465`	`+ &.mx_EventTile_lastInSection {`
	`466`	`+ /* Other half of the gutter is provided by margin-top on the first`
	`467`	`+ tile of the section */`
	`468`	`+ margin-bottom: calc(var(--gutterSize) / 2);`
	`469`	`+ }`
`465`	`470`	`}`
`466`	`471`	`}`
`467`	`472`