This reworks the global CSS layout and aims at making rendering less glitchy.
I was working on other PRs and found that the current layout has some quirks such as elements overlapping with the footer and the like.
In my PR about selecting nodes #104, when too many nodes are selected, scrolling is glitchy. While working on a fix to #111, I realized that add error messages above/below the graph view was glitchy too.
This PR also brings more consistency in the CSS by using variables provided by our CSS library Shoelace instead of specifying things by hand (e.g. fonts, sizes, etc).
Overall, this does not change the rendering we are used too but the overall experience will be improved and the global layout will be more resilient to changes.
For now, some details about the graph viewer need to be sorted out, hence the DRAFT status. The graph rendering is done by cytoscape and we have little control over it: when you change the window size after rendering the graph for instance, the cytoscape pane remains the same size. I will investigate whether it is possible to rerender when the window is resized or a new element (e.g. error pane) is brought in. In those cases, this PR limits the annoyance to scrollbars instead of overlapping elements.
This reworks the global CSS layout and aims at making rendering less glitchy.
I was working on other PRs and found that the current layout has some quirks such as elements overlapping with the footer and the like.
In my PR about selecting nodes #104, when too many nodes are selected, scrolling is glitchy. While working on a fix to #111, I realized that add error messages above/below the graph view was glitchy too.
This PR also brings more consistency in the CSS by using variables provided by our CSS library Shoelace instead of specifying things by hand (e.g. fonts, sizes, etc).
Overall, this does not change the rendering we are used too but the overall experience will be improved and the global layout will be more resilient to changes.
For now, some details about the graph viewer need to be sorted out, hence the DRAFT status. The graph rendering is done by cytoscape and we have little control over it: when you change the window size after rendering the graph for instance, the cytoscape pane remains the same size. I will investigate whether it is possible to rerender when the window is resized or a new element (e.g. error pane) is brought in. In those cases, this PR limits the annoyance to scrollbars instead of overlapping elements.