Little Outliner - body text moves as 'breadcrumb' path wraps to extra lines

Open
#229 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Bug
Clarity
Needs clarification
Activity status
Stale
Tech stack
javascript
Domain
frontend

Research direction

No file, test, or entry point is identified. Start by reproducing the attached GIF behavior in Little Outliner while navigating with the mouse, then trace the outline display library and browser wrapping behavior; done means the body text no longer jumps unpredictably as the breadcrumb path changes.

Written by the indexing model from the issue text.

Description

When navigating an outline with the mouse, it can be hard to consistently target the correct level on the first click since the body text moves to accommodate the changing size of the 'breadcrumb' header.

See attached animated gif (mirror) for an example:
ezgif-5-49adf87800

If you are several pages down in the outline, the cause is not even necessarily obvious to the user; they just notice that their text keeps jumping around while they navigate.

This is likely not specific to LO, but to the underlining outline display library (of which I can't remember the name at this moment)


I'm not sure what the best fix would be (and I have no idea how much information JS has about how the browser is wrapping lines of text).

Brainstorming:

  1. If the outline position changed due to the mouse and it is necessary to change the number of lines of the heading, delay updating the heading for some period of time (e.g. 0.5-3 seconds)
  2. Always reserve at least 2(?) lines of space for the heading as long as the window is at least a certain size
  3. Truncate to a single line
Dominant language
HTML
Stars
134
Forks
10
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from scripting/Scripting-News

All issues in scripting/Scripting-News

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.