Class Table Grid Overflow & Non-sticky Header on Safari (Ag-Grid React Bug)

[jophy-ye]

The class table grid is partially broken on Safari browsers (only).

Description

At first, class details were hidden because the table overflowed. A hot fix was deployed with #137. It seems that the <AgGridReact> component is not properly adhering to the parent <Box>'s width and height (set to width: 100% and height: 320px). According to the official docs, it should fit the parent container, but it appears not to on Safari (Webkit). This could potentially be a bug with ag-grid-react itself, though I am unsure at this point. (On the contrary, this page in the docs hints us to use style of <AgGridReact> which doesn't exist now. Kinda confusing...)

Furthermore, the sort-by-column switches is not rendered, and the table header is not sticky (check screenshots below).

Therefore, it seems a there is a fundamental bug with ag-grid (or how we use ag-grid) on webkit browsers.

Screenshot

Look on my Safari browser, before #137

---

Safari 16.4 v.s. Chrome (on my Apple M2 MacBook Pro, Ventura 13.3.1)

TODO

It might be worth upgrading ag-grid-react to see if the issue persists, but we're using the latest version 33.0.4. Consider filing an issue with the ag-grid-react repository if the problem continues in newer versions. Would be great to investigate this further if I have the time.