webknossos icon indicating copy to clipboard operation
webknossos copied to clipboard

Skeleton tab has too many scrollbars

Open hotzenklotz opened this issue 1 year ago • 3 comments

Context

In the tracing UI > skeleton tab: Long tree lists and trees with long names can cause the layouting to slightly break. As a consequence there will be various scrollbars. See screenshot:

image

Durch die Scrollbar links-rechts unten im Skeleton Tab kommt man nicht mehr gut an den letzten Tree. Ich konnte das nicht mehr reproduzieren, aber ein Kollege auf dem Mac hat das Problem. Vielleicht ein Bug, weil zwei Scrollbars angezeigt werden? Bild im Anhang

Likely, a regression of https://github.com/scalableminds/webknossos/issues/5872. Both the antd <Tree> component and the surrounding FlexLayout container have some constraints on this layouting.

Expected Behavior

There should only be one vertical scrollbar. (and maybe one horizontal one?)

Current Behavior

There are two horizontal scrollbars. The last tree item in the list is often blocked by the scrollbars.

Your Environment for bug

  • Version of WEBKNOSSOS (Release or Commit): 24.08.0

hotzenklotz avatar Sep 05 '24 11:09 hotzenklotz

Its caused by the button bar that starts with the search. Is it okay if I put the buttons into a flexbox, so that they are moved into a new line in case the tab gets narrow? Looks about like this image

knollengewaechs avatar Oct 25 '24 13:10 knollengewaechs

In terms of the horizontal scroll bar, I agree that this would be nice. But we use the height prop for the virtualization of the tree and unfortunately Antd says in its tree doc, "Config virtual scroll height. Will not support horizontal scroll when enable this" so I think its not possible for the tree list alone. Nevertheless maybe I can insert a minimum width, and add a horizontal scrollbar in case the tab is narrower

knollengewaechs avatar Oct 25 '24 13:10 knollengewaechs

Its caused by the button bar that starts with the search. Is it okay if I put the buttons into a flexbox, so that they are moved into a new line in case the tab gets narrow? Looks about like this

Let's do this for the time being.

hotzenklotz avatar Oct 28 '24 07:10 hotzenklotz