search

observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

Sticky header covers scroll targets #401

Open mootari opened 2 years ago

mootari commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

Cobus, we fixed this recently.

mootari commented 2 years ago

@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 commented 2 years ago

This is still an issue for anchors.

CobusT commented 10 months ago

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 commented 10 months ago

Sticky headers still cover the target:

image