When reaching the github pages deployment, we can observe an incorrect padding behavior on the navbar and a lack of responsiveness for the graph.
Expected behavior
Content padding
The main container should use 100% of the viewport's width.
Responsiveness
Resizing the window should also resize the graph to match the new width.
Current behavior
Content padding
Background is colored in red
The main content is left and right padded by 15px.
Responsiveness
The plot is not listening for window resize events. The website was opened in fullscreen and resized down to 50%.
Possible solutions
These two files are responsible of the behavior:
docs/index.html: The container-fluid css class introduces a 15px padding for both left and right direction: we can override both padding by adding the px-0 class to the divider.
doc/static-dashboard.js: the built-in responsive parameter within Plotly's newPlot function allow us to listen for resizing events.
When reaching the github pages deployment, we can observe an incorrect padding behavior on the navbar and a lack of responsiveness for the graph.
Expected behavior
Content padding
The main container should use 100% of the viewport's width.
Responsiveness
Resizing the window should also resize the graph to match the new width.
Current behavior
Content padding
Background is colored in red
The main content is left and right padded by 15px.
Responsiveness
The plot is not listening for window resize events. The website was opened in fullscreen and resized down to 50%.
Possible solutions
These two files are responsible of the behavior:
container-fluidcss class introduces a 15px padding for both left and right direction: we can override both padding by adding thepx-0class to the divider.newPlotfunction allow us to listen for resizing events.