Bug report: margin and padding sliders in CSS demo alters Observable hover cell alignment

Feedback
1

I’m going through this notebook: Baseline Grid / Gabriel Gianordoli | Observable

The first two interactive sliders are labeled “margin-top” and “padding-bottom”. Moving either of them causes the remainder of the notebook to be misaligned with the Observable cell hover thing in the left-hand margin. I mean the thing that looks like this, with the “…” menu that appears on hover:
+
|
+

I hope this helps!

2

This is a known interaction with a notebook that mutates global styles and browsers that don’t yet support ResizeObserver, such as Safari. This could be fixed by having the notebook manually report that the cell heights have changed (say by dispatching load events from the affected cells), or upgrading to Safari 13.

3

Great answer, thank you.