Sticky header covers scroll targets

[mootari]

Describe the bug

When a notebook contains edits, Observable sticks the notebook menu bar to to the top of the viewport.

This bar covers jump targets (anchors, search results) and thus several impedes navigation and orientation within a notebook.

Expected behavior

Scrolling to elements is offset by the height of the sticky bar.

Additional context

This is an longstanding problem that has likely been touched on in other issues as well.

[mootari]

Workaround

Add a user style sheet with the following content:

@-moz-document url-prefix("https://observablehq.com/") {
  #__next div[data-node-id], .cm-content > div {
    scroll-margin-top: 52px;
    scroll-margin-bottom: 52px;
  }
}

This also fixes the scrolling issue described in https://github.com/observablehq/feedback/issues/291#issuecomment-1079665613.

Edit: Does not work for jumps from cell references to viewof cells.

[CobusT]

@mootari Could you attach an example video of this problem. I can't seem to reproduce it (see video clip)

https://user-images.githubusercontent.com/10869236/163855361-a1e3f8f1-a7d0-4719-9521-68521710ce32.mov

.

[mbostock]

Cobus, we fixed this recently.

[mootari]

@CobusT It's fixed for search results, but still a problem for anchors:

1. Go to https://observablehq.com/@ambassadors/input-history@2582
2. In the first cell output, look for the line that says "Go to: inputHistory, statesWidget, Changelog, Todos"
3. Click either "inputHistory" or "statesWidget"

[mootari]

This is still an issue for anchors.

[CobusT]

I think this has been fixed by the new implementation of the sticky headers. Please re-open if this is not the case. I cannot reproduce.

[mootari]

Sticky headers still cover the target: