@hkfb, Per your request here is a draft PR with my story changes to recreate the issue:
When SyncLogView is rendered in a parent component that has overflow set to "auto" and that has a size smaller than SLV could fit in, we see strange layout behavior:
First we see that there are two horizontal scrollbars - the inner one is the one we added to the parent component containing SLV and its width is the width of the storybook frame. The outer one belongs to storybook iframe itself.
When we scroll the inner scrollbar we see that the some of the components (title, WLV scrollbars, info are and zoom controller) move with the scroller, however the tracks themselves remain stationary. Lookin with browser debugger it appears that the tracks are styled with position: "absolute". This is position defined in component "Scroller" which sets the size and position of the internal component it wraps according to scroll position and zoom level.
Please note that the story structure mimics almost exactly the layout of an application which uses this component.
What is the correct way to fix this component such that the internal elements would not be positioned absolutely and if they, must be, how can we detach the internal components from and external parent component (similar to what storybook does) so that we could fit the component inside a larger layout such that it will have a horizontal scrollbar and will move correctly with it?
@hkfb, Per your request here is a draft PR with my story changes to recreate the issue:
When SyncLogView is rendered in a parent component that has overflow set to "auto" and that has a size smaller than SLV could fit in, we see strange layout behavior:
First we see that there are two horizontal scrollbars - the inner one is the one we added to the parent component containing SLV and its width is the width of the storybook frame. The outer one belongs to storybook iframe itself.
When we scroll the inner scrollbar we see that the some of the components (title, WLV scrollbars, info are and zoom controller) move with the scroller, however the tracks themselves remain stationary. Lookin with browser debugger it appears that the tracks are styled with position: "absolute". This is position defined in component "Scroller" which sets the size and position of the internal component it wraps according to scroll position and zoom level.
Please note that the story structure mimics almost exactly the layout of an application which uses this component.
What is the correct way to fix this component such that the internal elements would not be positioned absolutely and if they, must be, how can we detach the internal components from and external parent component (similar to what storybook does) so that we could fit the component inside a larger layout such that it will have a horizontal scrollbar and will move correctly with it?