Fullscreen mode: Unnecessary vertical scrollbar blocks UI elements on right side of screen

[praveer38]

Screenshot

Description

When a graph is in fullscreen mode, there is an unnecessary vertical scrollbar that blocks some of the UI elements on the right side of the screen (i.e. the “Inv” button). This vertical scrollbar remains visible regardless of the browser window size.

Expected:

The scrollbar should not be present. Even if the scrollbar is present, the buttons on the corner should not be affected the way they are getting hidden.

Actual:

The scrollbar is present and obscures some page elements under it

[dosubot]

The issue with the unnecessary vertical scrollbar in fullscreen mode could be related to the CSS styling applied to the chart or its container. The ChartHolder component uses a fixed position with a high z-index for fullscreen mode, which might be causing layout issues if the dimensions are not correctly calculated or if there is an overflow property set on the container or parent elements ^[1].

To address this, you can check the following:

1. CSS Overflow Property: Ensure that there is no overflow property set to auto or scroll on the container or parent elements that might be causing the scrollbar to appear unnecessarily.

2. Chart Dimensions: Verify that the chart's width and height are correctly set to the window's inner dimensions minus any margins. This can prevent the scrollbar from appearing if the chart is slightly larger than the viewport.

3. CSS Styles: Review any additional CSS styles that might be affecting the layout in fullscreen mode, particularly those related to margins, padding, or positioning.

Adjusting these aspects should help in resolving the issue with the scrollbar obscuring UI elements.

To continue talking to Dosu, mention @dosu.

[samarsrivastav]

hey @praveer38 !! i have looked into the code and the issue, i think changing the padding of the chart in fullscreen mode will solve the issue
here is an screenshot of the code and the website-


Please let me know your thoughts