[NGRM] - SLV layout conflicts with MUI Grid

[mirisb]

Since WLV 1.7.0 which introduced ViewerLayout, there is a bug when the SyncLogViewer is within a MUI Grid container. The bug (probably related to Flex) causes the track to resize and grow infinitely until the page hangs.

This is a serious issue for clients who use MUI Grid for their layout and prevents them from upgrading to this version.

I am attaching a storybook file that can be plugged into webviz storybook to recreate the problem: example_story.zip

[Vladimir-Kokin]

The main idea is: the component wants to know its size. It is not good that the width grows limitlessly (this would be fixed). But in any case the component do not know own size because all its subelements also don't know own sizes, their sizes are computed from component's size.

As a first step I could suggest the following solution: Add to all 4 <div>s in the example additional parameter style={{width:"100%"}}

It set the width of the component to 100% of a story width.

If some of these<div>s could be removed than corresponding style={{width:"100%"}}` is not needed

Modified example: example_story.zip

[mirisb]

The workaround doesn't hold if moving to a second tab and back again to the tab showing the logs. This makes this issue more urgent. https://github.com/equinor/webviz-subsurface-components/assets/18436935/582d4771-a18c-4ca1-9a37-b83f129bb84a

[Vladimir-Kokin]

Sizes of the component should be set. Both width and height.

Here we could see that toplevel <div> has no width set (it has only height)

https://dev.azure.com/pdgm/EP%20Connect/_git/reservoir-viewers?path=%2Fclient-components%2Fsrc%2Fcomponents%2FWellLogView%2FWebvizWellLogView%2FWebvizWellLogView.tsx&_a=contents&version=GBmaster

[Vladimir-Kokin]

@mirisb Is it possible to set width of toplevel <div> ? Possible width:100% would help. As I previousely wrote (https://github.com/equinor/webviz-subsurface-components/issues/2015#issuecomment-2057702214) the component should wants to know its size. It get it fron its parent element. So parent element should have width ang height to be set. In an example in the previous connet width is not definitly set.

<div> (line 168) has width 100% of parent width but the parent <div> (line 158) has no definite width to be set

[mirisb]

@Vladimir-Kokin , see storybook example for classification layout. the bug is observed when switching to tab 2

[hkfb]

:tada: This issue has been resolved in version [email protected] :tada:

The release is available on GitHub release