Tree widget: “Please provide additional filtering…” message doesn’t fit on mobile devices

[grigasp]

“Please provide additional filtering…” message doesn’t fit (also it becomes possible to scroll horizontally (shouldn’t happen), message is cut off even if scrolled horizontally):

[grigasp]

@ValdasSorys, I'd like to hear your opinion on how you expect this to be fixed. Generally, our trees support horizontal scoll, so this should not be a problem. In your case I see there's no horizontal scrollbar, which I guess is turned off on your end.

Without horizontal scroll capability, how do you handle deep hierarchies with long node labels?

[ValdasSorys]

@grigasp The tree becomes horizontally scrollable (still works after update to tree-widget v3). When it's just tree nodes they fit, when this message shows up, it doesn't fully fit.

Simulator.Screen.Recording.-.14.Pro.16.4.-.2025-01-31.at.13.14.06.mp4

[grigasp]

@ValdasSorys, thanks, that is very helpful - the issue is clear now.

[grigasp]

Let's keep this open until the change is consumed by @itwin/tree-widget-react.

[grigasp]

@ValdasSorys, the fix was released with version 3.4.1. We'll keep this issue open until you confirm the problem is resolved - please let us know.

[ValdasSorys]

@grigasp The message still doesn't fit. Btw, did this also disable scrolling horizontally when nodes don't fit? I expected it to not horizontally scroll only when this message ("Please provide additional filtering...") was shown (so this message doesn't wouldn't cause horizontal scroll, but if nodes don't fit, they would).

Simulator.Screen.Recording.-.14.Pro.16.4.-.2025-02-10.at.14.08.38.mp4

[ValdasSorys]

If it's not possible to make it not scrollable - make it horizontally scrollable, but make the message fit (both before and now the message is truncated and user can't see every word).

[saskliutas]

Could you check what version @itwin/presentation-hierarchies-react package was resolved to? For me with the latest version it works correctly:

Yes we disabled horizontal scroll. The underlying Tree component does not support horizontal scroll and our attempt to add it caused visual issues (nodes have different size hover and highlight backgrounds, filter buttons do not align to the right side after scroll, etc). There is an issue opened for this iTwin/iTwinUI#2330.

[ValdasSorys]

@itwin/presentation-hierarchies-react resolved to 1.6.1

[saskliutas]

Should be fixed in @itwin/[email protected]. Looks like previous attempt to wrap text used css selectors that are not supported by Safari